前言
PDF 文档是一种很常见的文档格式，而 JavaScript 也可以处理 PDF 文档。pdfjs-build 是一个 npm 包，它提供了在浏览器中显示 PDF 文档所需的相关资源和配置信息。本文将详细介绍如何使用该包。
安装
使用 npm 安装 pdfjs-build
npm install pdfjs-build --save
安装后, 你会在你的 node_modules 文件夹中看到 pdfjs-build 文件夹。
引入模块
在你的 JavaScript 文件顶部添加以下代码来引入 pdfjs-build
import pdfjsLib from 'pdfjs-dist/webpack.js'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry.js'; import pdfjsBuild from 'pdfjs-build';
接下来，请务必将 pdfjs-worker.min.js 文件保存在您的公共文件夹中。pdfjs-worker.min.js 文件可以在以下地址中找到：/node_modules/pdfjs-dist/build/pdf.worker.min.js。
初始化
此时，pdfjsLib 库已经准备好了，但是使用它需要调用 PDF.js 命名空间中的方法。因此，我们需要等待 PDF.js 加载所有必需的 JavaScript 文件，并初始化。
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-worker.min.js'; pdfjsLib.GlobalWorkerOptions.workerPortPromise = pdfjsBuild.getWorkerPort;
不要忘记将 "/pdfjs-worker.min.js" 替换为实际存储库的路径。
加载 PDF 文件
要加载 PDF 文件，请使用以下代码：
const loadingTask = pdfjsLib.getDocument({ url: '/SomeDocument.pdf' });
const loadingTaskPromise = loadingTask.promise;
loadingTaskPromise.then((pdf) => {
// PDF 加载成功并可以使用
}).catch((error) => {
// 加载出错
});使用上述代码，您将加载文件到内存中。如果文件是加密的，您可以使用以下代码：
const password = prompt('请输入密码');
const loadingTask = pdfjsLib.getDocument({ url: '/SomeDocument.pdf', password });显示 PDF 文件
<div id="pdfViewer"></div>
接下来，请使用以下代码来呈现 PDF
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ------ - --- ----------------------- ---------- --------- --- ----------------------- --- -- ---- ------------------------------- -- -- - -- ------- --- ----------------------------- -- - ------------------------ ---------------- -- - -- ---- ---
恭喜您，您已经在网页上成功加载了 PDF。
指南
pdfjs-build 提供了很多选项，这些选项可以通过初始化过程中的选项来设置。
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ---------- --------- --------- ------ ------------ ----- -------------- -- --------------------- ----- ---------- ----- ------------ ----- ---------- ------ ------------ ---- --------------- ----- ------------ ----- --------------- ----- ---
renderer：指定要使用的渲染器。支持的选项是“canvas”，“svg”和“webgl”。 默认情况下，“canvas” 渲染器将被使用。
enableWebGL：如果这个选项为 true, 并且浏览器支持 WebGL，那么 PDF 文件将使用 WebGL 渲染。
textLayerMode： 定义文本层的行为。支持的选项是： 0（默认）：正常文本内容; 1：在前景中绘制高亮的文本内容（字形以反白方式绘制）; 2：逆转文本 (反显); 3: 取消逆转文本。
enhanceTextSelection：操作文本时，使文本更加容易选择的优化。
textLayer：启用或禁用文本层的呈现。
annotations：启用或禁用注释的呈现。
initialZoom：PDF文件的初始缩放级别。
mouseWheelZoom：启用或禁用使用鼠标滚轮缩放 PDF。
enablePrint：启用或禁用打印选项。
enableDownload：启用或禁用下载 PDF 的选项。
示例
完整示例代码如下:
-- -------------------- ---- -------
--------- -----
------
------
---------- ------ ---------------
----- --------------- ---------------------------- -------------------
---- ------ ---
----- ---------------- ---------------------------------------------------
-------
------
---- ---------------------
---- -- ---------- -- ---
------- ---------------------------------------------------
------- ------------------------------------------------------------------
------- ------------------------------------------------
------- -----------------------------------------------------
--------
-------------------------------------- - -----------------------
---------------------------------------------- - -------------------------
----- --------- - -------------------------------------
----- ------ - --- -----------------------
----------
--------- --- -----------------------
---
----------------------------- -- -
------------------------
------------------------------- -- -- -
-- -------
---
---------------- -- -
-------------------
---
---------
-------
-------总结
pdfjs-build 是一个十分强大的 npm 包，它能让你在浏览器中快速呈现 PDF 文档。通过我们的教程，您已经可以开始在您的网站上使用 pdfjs-build 并显示 PDF 文件了。不要忘记要适当改变您的代码以适应您的需求。祝您玩得愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382268d