phpviewerjspdf技巧_PDFjs Electron Viewer

本文旨在先容 PDF.js 于 Electron 里如何开始利用，实际考试测验了用其 API 或嵌入 HTML 的几种办法。

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

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

# 获取模板git clone --depth=1 \https://github.com/electron-react-boilerplate/electron-react-boilerplate \electron-pdf-viewercd electron-pdf-viewer# 设定仓库git remote set-url origin git@github.com:ikuokuo/electron-pdf-viewer.git# 如果想合并成一个初始提交# https://stackoverflow.com/a/23486788git config --global alias.squash-all '!f(){ git reset $(git commit-tree HEAD^{tree} -m "${1:-A new start}");};f'git squash-all "first commit"git push -u origin main

# 依赖npm install# 运行npm start# 打包npm run package

准备编辑器（VSCode）：

code --install-extension dbaeumer.vscode-eslintcode --install-extension dzannotti.vscode-babel-coloringcode --install-extension EditorConfig.EditorConfig

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

添加 antd 依赖:

npm install antd

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

PDF.js

添加 pdfjs 依赖：

npm install pdfjs-distnpm install -D worker-loader

此外，准备 PDF 样例进 static/，大略用 Python 供应 HTTP 访问：

npm run static

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

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

1. 导入包

import as pdfjsLib from 'pdfjs-dist/webpack';

2. 渲染页面

(async () => { // 获取 doc const loadingTask = pdfjsLib.getDocument(url); const pdf = await loadingTask.promise; console.log(`PDF loaded, n=${pdf.numPages}`); setNumPages(pdf.numPages); // 获取 page const page = await pdf.getPage(1); // 获取 canvas const scale = 1.5; const viewport = page.getViewport({ scale }); // Support HiDPI-screens. const outputScale = window.devicePixelRatio || 1; const canvas = canvasRef.current; if (canvas == null) return; const context = canvas.getContext('2d'); canvas.width = Math.floor(viewport.width outputScale); canvas.height = Math.floor(viewport.height outputScale); canvas.style.width = `${Math.floor(viewport.width)}px`; canvas.style.height = `${Math.floor(viewport.height)}px`; const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null; // 渲染 page const renderContext = { canvasContext: context, transform, viewport, }; await page.render(renderContext); console.log('Page rendered!');})();

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

利用 Viewer API

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

1. 导入包

import as pdfjsLib from 'pdfjs-dist/webpack';import { PDFViewer, EventBus } from 'pdfjs-dist/web/pdf_viewer';import 'pdfjs-dist/web/pdf_viewer.css';

2. 布局页面

<div className="viewer"> <div>url={url}</div> <div>numPages={numPages}</div> <div ref={hrRef} /> <div ref={containerRef} className="container"> <div className="pdfViewer" /> </div></div>

哀求 absolute 定位：

.viewer { position: relative; .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll; }}

3. 渲染 PDF

const container = containerRef.current;if (container == null) return;if (hrRef.current) { container.style.top = `${hrRef.current.offsetTop}px`;}// 监听事宜，必须传参 PDFViewer 为实例const eventBus = new EventBus(null);eventBus.on('pagesinit', () => { console.log('pagesinit');});// eslint-disable-next-line @typescript-eslint/no-explicit-anyeventBus.on('pagesloaded', (e: any) => { console.log('pagesloaded'); console.log(e); setNumPages(e.pagesCount);});eventBus.on('pagerendered', () => { console.log('pagerendered');});// 创建 PDFViewerconst pdfViewer = new PDFViewer({ container, eventBus, linkService: null, renderer: 'canvas', l10n: null,});// 导入 Document(async () => { const loadingTask = pdfjsLib.getDocument(url); const pdf = await loadingTask.promise; pdfViewer.setDocument(pdf);})();

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

利用 Viewer HTML

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

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

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

git clone -b master --depth=1 https://github.com/mozilla/pdf.js.gitcd pdf.js# 安装依赖npm install -g gulp-clinpm install# 开拓运行gulp server# http://localhost:8888/web/viewer.html# 编译发布gulp generic# build/generic/

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

<div className="viewerHTML"> <div>pdfUrl={pdfUrl}</div> <div>pdfWebViewerUrl={pdfWebViewerUrl}</div> <iframe className="pdfViewer" title="PdfViewerHTML" src={`${pdfWebViewerUrl}?file=${pdfUrl}`} /></div>

.viewerHTML { .pdfViewer { border: none; width: 100%; height: 100%; }}

这里打开的 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

标签：Electronviewer