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

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

# 获取模板
git clone --depth=1 \
https://github.com/electron-react-boilerplate/electron-react-boilerplate \
electron-pdf-viewer

cd electron-pdf-viewer

# 设定仓库
git remote set-url origin [email protected]:ikuokuo/electron-pdf-viewer.git
# 如果想合并成一个初始提交
#  https://stackoverflow.com/a/23486788
git 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-eslint
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension EditorConfig.EditorConfig

其他编辑器，可见 Editor Configuration。

Ant Design

添加 antd 依赖:

npm install antd

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

PDF.js

添加 pdfjs 依赖：

npm install pdfjs-dist
npm install -D worker-loader

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

npm run static

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

PDF.js 渲染

使用 API

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

1. 导入包

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

2. 渲染页面

(async () => {
   
  // 获取 doc
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;

  console.