浏览器中展示PDF（兼容IE）

之前接到个需求：需要在chrome浏览器、IE10和IE11中直接查看PDF，最好是不需要安装插件或设置浏览器选项。
先是百度了一下，找到一个插件react-pdf 当时搜到博客说可以兼容IE10。

一、react-pdf 踩坑（着急找答案的可跳过）

代码如下：

/*

* 展示PDF的组件

* */

import React, { PureComponent } from 'react';

import PropTypes from 'prop-types';

import LoadingOrEmptyComponent from 'components/LoadingOrEmptyComponent';

import { Document, Page } from 'react-pdf';

import style from './PDFComponent.less'

class PDFComponent extends PureComponent {

 constructor(props) {

 super(props);

 this.state = {

     numPages: null,

     pageNumber: 1,

  }

 }

 static propTypes = {

    textDataSet:PropTypes.object

 };

 static defaultProps = {

    textDataSet:{}

 };

 onDocumentLoadSuccess = ({ numPages }) => {

    this.setState({ numPages });

 }

 render() {

 let { textDataSet } = this.props;

 let { pageNumber,numPages } = this.state;

 let src = textDataSet.EMR_FILE_PATH;

 if(src){
     return(

         <iframe src={src} width="100%" height={"800px"}>

             <div align="center">

                 <Document

                 file={src}

                 onLoadSuccess={this.onDocumentLoadSuccess}>

                 <Page pageNumber={pageNumber} />

                 </Document>

                <p>Page {pageNumber} of {numPages}</p>

             </div>

         </iframe>

     )

     }else{

         return(

            <LoadingOrEmptyComponent isLoadingOrEmpty={true}/>

         )

     }

  }

}

export default PDFComponent;

试了下，并不能兼容IE10，我太难了，当时前方一直催进度，差点急死~

接着各种找，后来发现另一个：pdf.js

二、pdf.js

核心部分是pdf.js和pdf.worker.js，一个负责API解析，一个负责核心解析

2.1使用方法如下：

下载 pdf.js（点此链接）
然后将pdfjs放到前端代码的public下。
封装一个pdf组件，代码如下：

/*

* 展示PDF的组件

* */

import React, { PureComponent } from 'react';

import PropTypes from 'prop-types';

import LoadingOrEmptyComponent from 'components/LoadingOrEmptyComponent';

class PDFComponent extends PureComponent {

 constructor(props) {

 super(props);

     this.state = {
     }

 }

 static propTypes = {

    textDataSet:PropTypes.object

 };

 static defaultProps = {

    textDataSet:{}

 };

 componentDidMount(){

     let { subTabKey,textDataSet} = this.props;

     let type = textDataSet.EMR_FILE_TYPE;

     let file_path = textDataSet.EMR_FILE_PATH;

     let basePath = "/uranus/UI/detail/fileProxy?fileType="+ encodeURIComponent(type) +'&url='+encodeURIComponent(file_path);

     document.getElementById("pdfIframe" + subTabKey).src = "pdfjs/web/viewer.html?file="+encodeURIComponent(basePath);

 }

 render() {

     let { textDataSet,subTabKey} = this.props;

     let src = textDataSet.EMR_FILE_PATH;

     if(src){

         return(

             <iframe name="pdfIframe" id={"pdfIframe" + subTabKey} width="100%" height="100%">

             </iframe>

         )

     }else{

         return(

            <LoadingOrEmptyComponent isLoadingOrEmpty={true}/>

         )

     }

  }

}

export default PDFComponent;

注意：采用的版本是2.0，最新的版本不支持IE10。
写得比较糙，中间还有很多踩坑过程就省略了，也没能花时间仔细研究react-pdf兼容IE的办法，如有问题欢迎指正，欢迎多交流沟通~