React中实现PDF的在线预览功能

最近项目中遇到了PDF预览的需求,客户要求可以在线查看PDF文件内容,不想下载下来再打开,踩了一些坑,做一个总结。

最简单的实现方式

目前几乎市面上的浏览器都原生支持了PDF预览功能,也就是说把一个在线的pdf地址,直接放在浏览器里是可以直接打开的。所以实现思路很简单粗暴,直接内嵌一个iframe就可以实现预览。

基本所有的功能都齐全了,如果不是极致要求兼容和一致性,都使用这个方案。

PDF.js

这是mozilla开源的一个前端pdf渲染框架,目前市面上常见的PDF渲染库基本都是基于它做的封装。

我没有采用这种方案是因为它默认是单独启动一个html,然后把pdf地址传进去,我个人不太喜欢。

React-pdf

react-pdf是基于pdf.js的封装,可以使用React的语法去灵活自定义。

安装

1npm install react-pdf
2
3// or
4
5yarn add react-pdf

配置

详细配置方案参考官网:wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.

说一下我的配置方法,我没有使用本地的配置,使用的是CDN,一方面项目本身已经比较大了,还有一方面是后面可能要对webpack升级,就先不折腾。

PS:如果你的部署环境完全是内网运行的,不要用我这种方法。

需要配置2个内容,一个是worker,一个是cmap(这个不配置好像也能用),如下:

1// 配置worker
2pdfjs.GlobalWorkerOptions.workerSrc = `//cdn.staticfile.org/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

cmap的配置在Document组件里设置,我使用也还是CDN。

 1<Document options={{
 2  cMapUrl: `https://unpkg.com/browse/pdfjs-dist@${pdfjs.version}/cmaps/`,
 3  cMapPacked: true,
 4}} file={url} onLoadSuccess={onDocumentLoadSuccess}>
 5  {Array.from(
 6    new Array(numPages),
 7    (el, index) => (
 8      <Page
 9        renderTextLayer={false}
10        width={740}
11        key={`page_${index + 1}`}
12        pageNumber={index + 1}
13      />
14    )
15  )}
16</Document>

上面的代码实现的是把所有的PDF页面渲染出来,效果如图:

遇到的问题

在渲染知网论文的时候会有一些中文无法显示的情况出现,搜索了一下似乎是bug,参考这里:Chinese type 1 font does not render: Warning: Unknown type 1 charstring command of "0" · Issue #5790 · mozilla/pdf.js,解决方案参考这里:Error during font loading: Unable to load binary CMap at: ../web/cmaps/GBK-EUC-H.bcmap · Issue #10660 · mozilla/pdf.js

参考

  1. mozilla/pdf.js: PDF Reader in JavaScript

  2. wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.