php 预览pdf不支持ie,浏览器中展示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(

file={src}

onLoadSuccess={this.onDocumentLoadSuccess}>

Page {pageNumber} of {numPages}

)

}else{

return(

)

}

}

}

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(

)

}else{

return(

)

}

}

}

export default PDFComponent;注意：采用的版本是2.0，最新的版本不支持IE10。

写得比较糙，中间还有很多踩坑过程就省略了，也没能花时间仔细研究react-pdf兼容IE的办法，如有问题欢迎指正，欢迎多交流沟通~