柚子快報(bào)邀請碼778899分享：前端 pdf 在線預(yù)覽

http://yzkb.51969.com/

主要介紹了幾種 pdf 在線預(yù)覽的方式，包括瀏覽器打開、iframe 打開、pdfjs、react-pdf 第三方插件預(yù)覽等

pdf 文件放在本地了(public/pdf/demo.pdf)，作為靜態(tài)文件訪問。

因?yàn)轫?xiàng)目最終要通過 electron 打包成 exe 執(zhí)行文件，而且需要離線訪問。

1. 瀏覽器打開

通過window.open直接打開一個(gè)新窗口，預(yù)覽 pdf 文件。

通過 Command+F 可以進(jìn)行全局搜索，這也是瀏覽器自帶的功能

window.open("./pdf/demo.pdf");

2. iframe 打開

和瀏覽器新窗口打開一樣，也是使用了瀏覽器文件本身的功能實(shí)現(xiàn)預(yù)覽，即內(nèi)置的 PDF Viewer 來顯示 PDF。

可以在 url 后面添加參數(shù)，進(jìn)行個(gè)性化配置展示，調(diào)整初始化狀態(tài)等：

page：跳轉(zhuǎn)到指定頁碼。初始化配置，可以控制 pdf 默認(rèn)打開的起始頁面 navpanes：控制左側(cè)的縮略圖預(yù)覽導(dǎo)航是否默認(rèn)打開。0-關(guān)閉，1-打開 toolbar：是否展示工具欄。0-關(guān)閉，1-打開

??className="pdf-iframe"

??title="預(yù)覽文檔"

??src="./pdf/demo.pdf#page=100&navpanes=0"

??width="100%"

??height="100%"

>

但是這個(gè)是可以在瀏覽器中進(jìn)行配置的

具體操作為設(shè)置-隱私設(shè)置和安全性-網(wǎng)站設(shè)置-更多內(nèi)容設(shè)置-PDF文檔

設(shè)置為“在 Chrome 中打開 PDF 文件”，為如下效果：

設(shè)置為“下載 PDF 文件”，為如下效果：

基本功能都有了，缺點(diǎn)是沒法實(shí)現(xiàn)全局搜索

3. pdfjs 插件打開

github 地址為：github.com/mozilla/pdf…[1]

下載地址為：download[2]

viewer.html是 pdfjs 庫提供的一個(gè)示例頁面，提供了完整的 PDF 閱讀界面，包含了各種功能和工具。如果需要自定義展示頁面，可以自己寫一個(gè)頁面，動態(tài)化展示功能.

??className="pdf-iframe"

??title="預(yù)覽文檔"

??src="/web/viewer.html?file=../pdf/demo.pdf#page=30&navpanes=0"

??width="100%"

??height="100%"

>

預(yù)覽效果如下圖所示：

4. react-pdf預(yù)覽

react-pdf 本質(zhì)上也是使用的 pdfjs，是在它的基礎(chǔ)上做了封裝。

該方式，是將 pdf 轉(zhuǎn)為 canvas，一頁頁展示的

如果文件比較大，頁碼比較多，加載可能會有些卡

但是移動端也是可以使用的。

import?{?Document,?Page,?pdfjs?}?from?"react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc?=?"./js/pdf.work.js";

function?onDocumentLoadSuccess({?numPages?}:?{?numPages:?number?}):?void?{

????setRenderNumPages(numPages);

}

??file="/pdf/demo.pdf"

??loading="資源加載中..."

??error="資源加載失敗"

??onLoadSuccess={onDocumentLoadSuccess}

??onLoadError={onLoadError}

??className="pdf_page_document"

>

??{[...Array(renderNumPages)].map((_,?index)?=>?(

????

??????key={`page_${index?+?1}`}

??????pageNumber={index?+?1}

??????loading=""

??????error="fail?to?load?resource"

??????renderMode="canvas"

??????renderAnnotationLayer={false}

??????renderTextLayer={false}

??????width={300}

????/>

??))}

;

預(yù)覽效果如下所示：默認(rèn)沒有工具欄，需要自己處理

注意：pdfjs和pdf.worker.js的版本號要對應(yīng)，不然會有如下報(bào)錯(cuò)：

Warning: UnknownErrorException: The API version "3.11.174" does not match the Worker version "3.6.172".

查看版本號，可以通過console.log("pdf-js版本", pdfjs.version)來打印

柚子快報(bào)邀請碼778899分享：前端 pdf 在線預(yù)覽

http://yzkb.51969.com/

好文閱讀