php 预览pdf不支持ie,浏览器中展示PDF（兼容IE）

末蓝、 2023-01-17 11:58 140阅读 0赞

之前接到个需求：需要在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，我太难了，当时前方一直催进度，差点急死~

![bVbO9Sz][]

接着各种找，后来发现另一个：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的办法，如有问题欢迎指正，欢迎多交流沟通~

[bVbO9Sz]: https://segmentfault.com/img/bVbO9Sz

php 预览pdf不支持ie,浏览器中展示PDF（兼容IE）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 javafx预览PDF

相关 pdf预览

相关 php 预览pdf不支持ie,浏览器中展示PDF（兼容IE）

相关兼容ie——下载base64pdf格式文件

相关 vue 预览pdf

相关 ie浏览器兼容

相关在线预览PDF

相关 IE8 上传图片预览（兼容）

相关 pdf预览 pdf.js+pdfObject

相关 pdf文档预览