npm 包 @bastienmoulia/pdf.js-dist 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

PDF.js 是 Mozilla 开发的一个开源 PDF 解析与渲染的 JavaScript 库。它可以将 PDF 文件渲染成 HTML5 Canvas 或 SVG，从而在浏览器中实现显示 PDF 文件的功能。

@bastienmoulia/pdf.js-dist 是 PDF.js 的一个已打包好的 npm 包，方便我们在项目中使用。

安装

可以通过 npm 安装该包：

npm install @bastienmoulia/pdf.js-dist

使用

引入

在需要使用的地方引入包：

const pdfjsLib = require('@bastienmoulia/pdf.js-dist');

加载 PDF 文件

使用 pdfjsLib.getDocument() 方法加载 PDF 文件，参数为 PDF 文件的 URL 或 ArrayBuffer。

const url = 'example.pdf';

pdfjsLib.getDocument(url).promise.then((pdfDoc) => {
  // 加载成功
}).catch((error) => {
  // 加载失败
});

获取 PDF 页面

在加载成功后，使用 pdfDoc.getPage() 方法获取 PDF 页面，参数为页面序号，从 1 开始。返回值为一个 Promise，能够获取一个 PDFPage 对象。

pdfDoc.getPage(1).then((pdfPage) => {
  // 获取成功
}).catch((error) => {
  // 获取失败
});

渲染 PDF 页面

在获取 PDF 页面成功后，使用 pdfPage.render() 方法渲染页面，参数为一个对象，用于配置渲染的选项。返回值为一个 Promise，用于获取渲染好的对象。

下面是一个简单的示例代码：

pdfPage.render({
  canvasContext: canvas.getContext('2d'),
  viewport: viewport
}).promise.then(() => {
  console.log('渲染成功');
}).catch((error) => {
  console.log('渲染失败');
});

其中，canvas 为一个 HTML5 Canvas 对象，viewport 为一个 PDFPage 对象的属性，用于配置渲染的尺寸和缩放比例，如下：

const viewport = pdfPage.getViewport({
  scale: canvas.width / pdfPage.getViewport({scale: 1}).width
});

完整示例代码

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ------------- ------------
-------
------
  ------- ---------------------

  ------- --------------------------------------------------------------------------------
  --------
    ----- -------- - --------------------------------------

    ----- --- - --------------

    ----------------------------------------------- -- -
      -------------------------------- -- -
        ----- ------ - ----------------------------------
        ----- ------------- - ------------------------

        ----- -------- - ---------------------
          ------ ------------ - --------------------------- ---------
        ---

        ------------- - ----------------
        ------------ - ---------------

        ----------------
          -------------- --------------
          --------- --------
        ------------------ -- -
          --------------------
        ---------------- -- -
          --------------------
        ---
      ---------------- -- -
        --------------- --- -------
      ---
    ---------------- -- -
      --------------- --- -------
    ---
  ---------
-------
-------

总结

本文详细介绍了如何使用 @bastienmoulia/pdf.js-dist 这个 npm 包来加载、解析和渲染 PDF 文件。希望本文能够对你有所帮助，并且能够在实际开发中得到应用和拓展。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc3b