PDF.js 是一个基于 HTML5 技术的 JavaScript 库，用于在浏览器中显示 PDF 文档。它是由 Mozilla 开发和维护的开源项目。本文将介绍如何使用 PDF.js 在前端实现 PDF 文档的展示和操作。
安装和引入
首先，我们需要在项目中安装 PDF.js。可以通过 npm 包管理工具进行安装：
npm install pdfjs-dist
或者，也可以直接下载最新版本的 PDF.js，然后将其引入到 HTML 文件中：
<script src="/path/to/pdf.js"></script>
同时还需引入相应的 CSS 文件：
<link rel="stylesheet" href="/path/to/pdf_viewer.css">
加载 PDF 文档
为了加载 PDF 文档，我们需要获取 PDF.js 提供的 PDFDocumentProxy 对象。这个对象代表一个 PDF 文档，可以用于获取页面数量、页面大小等信息，以及渲染页面。
const loadingTask = pdfjsLib.getDocument('/path/to/document.pdf');
loadingTask.promise.then((pdf) => {
// pdf 是一个 PDFDocumentProxy 对象
});上面的代码会异步地加载 PDF 文档，并返回一个 Promise 对象。当 Promise 被解析时，我们就可以得到一个 PDFDocumentProxy 对象来操作文档了。
渲染 PDF 页面
要渲染 PDF 页面，我们需要使用 PDFPageView 类。这个类代表一个 PDF 页面，可以用于获取页面的 DOM 元素，以及进行缩放、旋转等操作。
-- -------------------- ---- -------
-------------------------- -- -
----- ----- - ----
----- -------- - ------------------ ----- ---
----- --------- - -----------------------------------------
--------------------- - ----------------------
---------------------- - -----------------------
----- ------ - ---------------------------------
------------ - ---------------
------------- - ----------------
------------------------------
----- -------- - --- -------------------------
----------
--- --
------
---------------- ---------
--------- --- -----------------------
-- --------- ----- -- ---------- - ------- ------
----------------- --- --------------------------------------
----------------------- --- --------------------------------------------
---
--------------------------
------ ----------------
---上面的代码会渲染第一页的 PDF 页面，并将其添加到一个指定的容器元素中（id 为 pdf-container）。
在上面的代码中，我们使用了 PDFPageView 类来创建页面视图。还需要注意的是，我们可以通过设置 renderer 属性来选择使用 canvas 还是 svg 渲染页面。
操作 PDF 文档
除了展示 PDF 页面外，PDF.js 还提供了许多方法和类来操作 PDF 文档，例如搜索、高亮显示文本、添加注释等功能。这里只列举一些常用的方法：
搜索文本
-- -------------------- ---- -------
-------------------------- -- -
----- --------- - --- -------------------------------------------------------------
--------------------------------------
--
-----
------------------------
--
------------------------------ -----------------------
--------------------------------------------
---上面的代码会在第一页中搜索关键词 PDF.js，并将所有匹配的文本高亮显示。
添加注释
-- -------------------- ---- -------
-------------------------- -- -
----- ---------------- - --- -------------------------------------------------------------------------
---------------------------------------------
-----
-----------------------------------------
--
--------------------------------- -----------
----- ---------- - --- -------------------------
-- --- ----
---
-------------------------------------------
--------------------------------- -----------
---上面的代码会在第一页
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11649