介绍
PDF.js 是 Mozilla 开发的一个开源 PDF 解析与渲染的 JavaScript 库。它可以将 PDF 文件渲染成 HTML5 Canvas 或 SVG，从而在浏览器中实现显示 PDF 文件的功能。
@bastienmoulia/pdf.js-dist 是 PDF.js 的一个已打包好的 npm 包，方便我们在项目中使用。
安装
可以通过 npm 安装该包：
--- ------- --------------------------
使用
引入
在需要使用的地方引入包：
----- -------- - --------------------------------------
加载 PDF 文件
使用 pdfjsLib.getDocument() 方法加载 PDF 文件，参数为 PDF 文件的 URL 或 ArrayBuffer。
----- --- - -------------- ----------------------------------------------- -- - -- ---- ---------------- -- - -- ---- ---
获取 PDF 页面
在加载成功后，使用 pdfDoc.getPage() 方法获取 PDF 页面，参数为页面序号，从 1 开始。返回值为一个 Promise，能够获取一个 PDFPage 对象。
-------------------------------- -- - -- ---- ---------------- -- - -- ---- ---
渲染 PDF 页面
在获取 PDF 页面成功后，使用 pdfPage.render() 方法渲染页面，参数为一个对象，用于配置渲染的选项。返回值为一个 Promise，用于获取渲染好的对象。
下面是一个简单的示例代码：
---------------- -------------- ------------------------ --------- -------- ------------------ -- - -------------------- ---------------- -- - -------------------- ---
其中，canvas 为一个 HTML5 Canvas 对象，viewport 为一个 PDFPage 对象的属性，用于配置渲染的尺寸和缩放比例，如下：
----- -------- - --------------------- ------ ------------ - --------------------------- --------- ---
完整示例代码
--------- -----
------
------
----- ----------------
------------- ------------
-------
------
------- ---------------------
------- --------------------------------------------------------------------------------
--------
----- -------- - --------------------------------------
----- --- - --------------
----------------------------------------------- -- -
-------------------------------- -- -
----- ------ - ----------------------------------
----- ------------- - ------------------------
----- -------- - ---------------------
------ ------------ - --------------------------- ---------
---
------------- - ----------------
------------ - ---------------
----------------
-------------- --------------
--------- --------
------------------ -- -
--------------------
---------------- -- -
--------------------
---
---------------- -- -
--------------- --- -------
---
---------------- -- -
--------------- --- -------
---
---------
-------
-------总结
本文详细介绍了如何使用 @bastienmoulia/pdf.js-dist 这个 npm 包来加载、解析和渲染 PDF 文件。希望本文能够对你有所帮助，并且能够在实际开发中得到应用和拓展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ff481e8991b448ddc3b