问题背景
因为项目需要，在react项目中需要实现pdf文件的预览。
环境配置
- node： v10.18.1
- react: v16.8.x
- yarn: v1.21.1
技术调研
截止2020年2月，市面上的主流在线可视化底层库为viewjs和pdf.js。两者定位不同，前者覆盖pdf，office等多种文档格式，部署复杂；后者由mozilla项目组创建和管理，相对轻巧。
而google搜索react pdf js等关键词，一般给出以下的几个库：
- [react-pdf](https://www.npmjs.com/package/react-pdf](https://www.npmjs.com/package/react-pdf): star较多
- react-pdf-js
- 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路径即可；
最后测试可以，分享给大家，具体问题可以私信笔者！
