React下实现pdf在线预览

问题背景

因为项目需要，在react项目中需要实现pdf文件的预览。

---

环境配置

1. node： v10.18.1
2. react: v16.8.x
3. yarn: v1.21.1

---

技术调研

截止2020年2月，市面上的主流在线可视化底层库为viewjs和pdf.js。两者定位不同，前者覆盖pdf，office等多种文档格式，部署复杂；后者由mozilla项目组创建和管理，相对轻巧。

而google搜索react pdf js等关键词，一般给出以下的几个库：

1. [react-pdf](https://www.npmjs.com/package/react-pdf](https://www.npmjs.com/package/react-pdf): star较多
2. react-pdf-js
3. react-native-view-pdf

前两个都是基于pdf.js ,后者属于react-native,不做考虑。

因此优先的选择是使用react-pdf，yarn安装后开始使用，官方的建议如下：

import { Document } from 'react-pdf';
// 还有下面的一种，说是针对webpack的配置
import { Document } from 'react-pdf/dist/entry.webpack';

但是测试后发现本地的yarn start起不了了，提示如下报错信息：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me...

暂时估计是pdf等库需要加载大文件导致的，被迫放弃。需要手动基于pdfjs来实现，搜索后发现PDFTron上有一篇简单教学可以用。原理也是清晰的：
https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/

• 下载pdf.js的版本到本地public目录
• 本地pdf的文件通过创建的iframe元素，设计iframe.src来显示，典型的路径为：/pdfjs-1.9.426-dist/web/viewer.html?file=${source},其中的pdfjs-1.9xxx就是下载的pdfjs版本
• react 里面封装PDFViewer，目的是绑定加载pdf路径和上一步的iframe，而这个路径既可以是远程的pdf url，也可以是通过接口获得的blob数据，最后使用URL.createObjectUrl生成的本地路径
• 最上层就是调用层，传入对应的src路径即可；

最后测试可以，分享给大家，具体问题可以私信笔者！