前端 pdf 在线预览

主要介绍了几种 pdf 在线预览的方式，包括浏览器打开、iframe 打开、pdfjs、react-pdf 第三方插件预览等

pdf 文件放在本地了(public/pdf/demo.pdf)，作为静态文件访问。

因为项目最终要通过 electron 打包成 exe 执行文件，而且需要离线访问。

1. 浏览器打开

通过window.open直接打开一个新窗口，预览 pdf 文件。

通过 Command+F 可以进行全局搜索，这也是浏览器自带的功能

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

2. iframe 打开

和浏览器新窗口打开一样，也是使用了浏览器文件本身的功能实现预览，即内置的 PDF Viewer 来显示 PDF。

可以在 url 后面添加参数，进行个性化配置展示，调整初始化状态等：

• page：跳转到指定页码。初始化配置，可以控制 pdf 默认打开的起始页面

• navpanes：控制左侧的缩略图预览导航是否默认打开。0-关闭，1-打开

• toolbar：是否展示工具栏。0-关闭，1-打开

1. <iframe
2.   className="pdf-iframe"
3.   title="预览文档"
4.   src="./pdf/demo.pdf#page=100&navpanes=0"
5.   width="100%"
6.   height="100%"
7. ></iframe>

但是这个是可以在浏览器中进行配置的

具体操作为设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档

%20

设置为“在%20Chrome%20中打开%20PDF%20文件”，为如下效果：

%20

%20

%20

设置为“下载%20PDF%20文件”，为如下效果：

%20

%20

%20

基本功能都有了，缺点是没法实现全局搜索

%20

3.%20pdfjs%20插件打开

%20

github%20地址为：github.com/mozilla/pdf…[1]

%20

下载地址为：download[2]

%20

%20

%20

viewer.html是%20pdfjs%20库提供的一个示例页面，提供了完整的%20PDF%20阅读界面，包含了各种功能和工具。如果需要自定义展示页面，可以自己写一个页面，动态化展示功能.

%20

1. <iframe
2.   className="pdf-iframe"
3.   title="预览文档"
4.   src="/web/viewer.html?file=../pdf/demo.pdf#page=30&navpanes=0"
5.   width="100%"
6.   height="100%"
7. ></iframe>
8. %20

%20

预览效果如下图所示：

%20

%20

%20

4.%20react-pdf预览

%20

react-pdf%20本质上也是使用的%20pdfjs，是在它的基础上做了封装。

%20

该方式，是将%20pdf%20转为%20canvas，一页页展示的

%20

如果文件比较大，页码比较多，加载可能会有些卡

%20

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

%20

1. import { Document, Page, pdfjs } from "react-pdf";
2. %20
3. pdfjs.GlobalWorkerOptions.workerSrc = "./js/pdf.work.js";
4. %20
5. function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
6.     setRenderNumPages(numPages);
7. }
8. %20
9. <Document
10.   file="/pdf/demo.pdf"
11.   loading="资源加载中..."
12.   error="资源加载失败"
13.   onLoadSuccess={onDocumentLoadSuccess}
14.   onLoadError={onLoadError}
15.   className="pdf_page_document"
16. >
17.   {[...Array(renderNumPages)].map((_, index) => (
18.     <Page
19.       key={`page_${index + 1}`}
20.       pageNumber={index + 1}
21.       loading=""
22.       error="fail to load resource"
23.       renderMode="canvas"
24.       renderAnnotationLayer={false}
25.       renderTextLayer={false}
26.       width={300}
27.     />
28.   ))}
29. </Document>;
30. %20

预览效果如下所示：默认没有工具栏，需要自己处理

注意：pdfjs和pdf.worker.js的版本号要对应，不然会有如下报错：

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

查看版本号，可以通过console.log("pdf-js版本", pdfjs.version)来打印