react-pdf 和 html媒体元素

html媒体元素： 只能在pc浏览器上显示 

                <object data="./src-react/assets/agreement.pdf" type="application/pdf">wrqrq</object>

                <object data="http://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4b8728ba4ebd4e1940277c426473b542-4807827.pdf" type="application/pdf"></object>

                <object data="http://www.baidu.com" ></object>

                <object>

                    <iframe src="http://front-images.oss-cn-hangzhou.aliyuncs.com/i4/4b8728ba4ebd4e1940277c426473b542-4807827.pdf" style={{ width: "100%", height: "300px" }} >

                    </iframe>

                </object>

react-pdf-js: 兼容pc与移动端pdf 

 import PDF from 'react-pdf-js';

export default class XXX extends ...{

      renderPagination = (page, pages) => {

        let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i>上一页</a></li>;

        if (page === 1) {

            previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i></a></li>;

        }

        let nextButton = <li className="next" onClick={this.handleNext}><a href="#">下一页<i className="fa fa-arrow-right"></i></a></li>;

        if (page === pages) {

            nextButton = <li className="next disabled"><a href="#"><i className="fa fa-arrow-right"></i></a></li>;

        }

        return (

            <div>

                <ul className="pager">

                    {previousButton}

                    {nextButton}

                </ul>

            </div>

        );

    }

render(){

        let pagination = null;

            if (this.state.pages) {

                pagination = this.renderPagination(this.state.page, this.state.pages);

            }

                    file="./agreement.pdf"

                    onDocumentComplete={this.onDocumentComplete}

                    page={this.state.page}

                />

                {pagination}

    }

}

转载于:https://www.jianshu.com/p/a455869e6661