javascript高级程序设计pdf-javascript高级程序设计第5版 收藏 0

PDF.js Electron Viewer

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。

本文旨在介绍 PDF.js 于 Electron 里如何开始使用，实际尝试了用其 API 或嵌入 HTML 的几种方式。

• 代码: https://github.com/ikuokuo/electron-pdf-viewer.git

项目采用 Electron React Antd PDF.js 来实现，以下是从零准备项目的过程。

这里用 electron-react-boilerplate[1] 模板开始 Electron React 项目。

准备编辑器（VSCode）：

其他编辑器，可见 Editor Configuration[2]。

添加 antd 依赖:

之后，就可以快速布局页面了，如下：

添加 pdfjs 依赖：

此外，准备 PDF 样例进 static/，简单用 Python 提供 HTTP 访问：

用于开发运行，正式运行可用 file:// 地址。

用 API 渲染页面，可见官方 Examples[3]。

1. 导入包

2. 渲染页面

完整代码，见 Pdfjs/index.tsx[4]。效果如下：

用 Viewer API 渲染，其在 pdfjs-dist/web/pdf_viewer 路径下。

1. 导入包

2. 布局页面

要求 absolute 定位：

3. 渲染 PDF

完整代码，见 PdfViewer/index.tsx[5]。效果如下：

PDF.js 提供了在线演示的 viewer.html，不过 pdfjs-dist 里没有，要自己编译其源码。

编译结果已放进 static/pdfjs/，可用 Electron Window 打开 web/viewer.html?file=x.pdf 或用 iframe 嵌入。

如果自己重新编译，过程如下：

iframe 嵌入的话，也是打开 web/viewer.html?file=x.pdf：

这里打开的 npm run static 提供的 HTTP 地址，效果如下：

iframe 要打开本地 HTML 试了下没成，如果想在 Electron + React 下这么用，还要研究下怎么弄。

PDF.js 可以说是 Web 渲染 PDF 的不二选择，很多 PDF Web Viewer 库都是基于它实现的。

GoCoding 个人实践的经验分享，可关注公众号！

[1] electron-react-boilerplate: https://electron-react-boilerplate.js.org/

[2] Editor Configuration: https://electron-react-boilerplate.js.org/docs/editor-configuration

[3] Examples: https://mozilla.github.io/pdf.js/examples/

[4] Pdfjs/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/Pdfjs/index.tsx

[5] PdfViewer/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/PdfViewer/index.tsx

PDF.js 很强，但 PDFSlick 可能更适合你！

大家好，很高兴又见面了，我是\”高级前端‬进阶‬\”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

PDFSlick is a library that enables viewing of and interaction with PDF documents in React, SolidJS, Svelte and JavaScript apps. It\’s build on top of Mozilla\’s PDF.js, and utilises Zustand to provide a reactive store for the loaded documents.

PDFSlick 是一个库，可以在 React、SolidJS、Svelte 和 JavaScript 应用程序中查看 PDF 文档并与之交互。PDFSlick 构建在 Mozilla 的 PDF.js 之上，并利用 Zustand 为加载的文档提供反应式存储。

PDF.js 虽然很优秀而且非常稳定和成熟，其也是 Mozilla Firefox 中的 PDF 查看器，自 2011 年以来一直存在。然而，其完全是 Vanilla JavaScript，当涉及到在现代 JS 库（如 React 和 SolidJS）中使用时仍然有诸多不足。

PDFSlick 试图将所有这些有用的功能包装成一个更容易适应 React 和 SolidJS 世界的功能，最终作为组件和反应存储。

目前 PDFSlick 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

首先需要安装依赖：

开发者可以通过 usePDFSlick() Hooks 开始使用 PDFSlick，如以下基本示例所示：

提供 PDF 文档路径和 PDFSlick 选项对象后，usePDFSlick() Hooks 将返回一个对象，该对象由以下各项组成（除其他内容外）：

• PDFSlickViewer 是用于查看 PDF 文档的 PDF 查看器组件
• viewerRef 是作为 组件的 prop 提供的 ref 回调
• usePDFSlickStore 允许在 React 组件中使用 PDFSlick 存储

同时，在 SolidJS 中使用也非常简单，比如下面的示例：

更多关于 PDFSlick 的用法和示例可以参考文末资料，本文不再过多展开

https://github.com/pdfslick/pdfslick

https://pdfslick.dev/docs/solid

https://pdfslick.dev/examples

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com