問題背景
因為項目需要，在react項目中需要實現(xiàn)pdf文件的預(yù)覽舟铜。
環(huán)境配置
- node： v10.18.1
- react: v16.8.x
- yarn: v1.21.1
技術(shù)調(diào)研
截止2020年2月戈盈，市面上的主流在線可視化底層庫為viewjs和pdf.js。兩者定位不同谆刨，前者覆蓋pdf塘娶，office等多種文檔格式，部署復(fù)雜痊夭；后者由mozilla項目組創(chuàng)建和管理血柳，相對輕巧。
而google搜索react pdf js等關(guān)鍵詞生兆，一般給出以下的幾個庫：
- [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,不做考慮。
因此優(yōu)先的選擇是使用react-pdf膝宁，yarn安裝后開始使用鸦难，官方的建議如下：
import { Document } from 'react-pdf';
// 還有下面的一種，說是針對webpack的配置
import { Document } from 'react-pdf/dist/entry.webpack';
但是測試后發(fā)現(xiàn)本地的yarn start起不了了员淫，提示如下報錯信息：
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me...
暫時估計是pdf等庫需要加載大文件導(dǎo)致的合蔽，被迫放棄。需要手動基于pdfjs來實現(xiàn)介返，搜索后發(fā)現(xiàn)PDFTron上有一篇簡單教學(xué)可以用拴事。原理也是清晰的：
https://www.pdftron.com/blog/react/how-to-build-a-react-pdf-viewer/
- 下載pdf.js的版本到本地public目錄
- 本地pdf的文件通過創(chuàng)建的iframe元素，設(shè)計iframe.src來顯示圣蝎，典型的路徑為：
/pdfjs-1.9.426-dist/web/viewer.html?file=${source},其中的pdfjs-1.9xxx就是下載的pdfjs版本 - react 里面封裝PDFViewer刃宵，目的是綁定加載pdf路徑和上一步的iframe，而這個路徑既可以是遠程的pdf url徘公，也可以是通過接口獲得的blob數(shù)據(jù)牲证，最后使用URL.createObjectUrl生成的本地路徑
- 最上層就是調(diào)用層，傳入對應(yīng)的src路徑即可关面；
最后測試可以坦袍，分享給大家十厢，具體問題可以私信筆者！
