npm 包 pdfjs-dist 使用教程

前言

PDF 是一种常见的文档格式，使用 PDF 工具可以进行阅读、编辑等操作，在前端开发中也会经常遇到需要操作 PDF 文件的场景。

pdfjs-dist 是一个基于 JavaScript 的 PDF 渲染器，能够直接在浏览器中渲染 PDF 文件，避免了需要安装 PDF 工具的繁琐操作，同时也提供了许多丰富的 API 接口，可以让我们方便地操作 PDF 文件。

本文将向大家介绍如何使用 npm 包 pdfjs-dist 进行前端 PDF 文件的操作，包括如何安装、如何使用、以及如何对 PDF 文件进行一些基本的操作。

安装

在使用 pdfjs-dist 之前，需要先安装 npm 包。

npm install --save pdfjs-dist

安装完成之后，就可以在项目中引入 pdfjs-dist 了。

import * as pdfjsLib from 'pdfjs-dist';

使用

加载 PDF 文件

使用 pdfjs-dist 加载 PDF 文件，需要获取 PDF 文件的数据流，然后通过 pdfjsLib.getDocument() 方法进行加载，最后通过 Promise 得到加载结果。

const url = 'http://example.com/sample.pdf';
const loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
  console.log('PDF document loaded.');
})
.catch(function(error) {
  console.log('An error occurred:', error);
});

另外，pdfjsLib.getDocument() 方法还支持以 ArrayBuffer 或者 Uint8Array 的形式加载 PDF 文件。

渲染 PDF 文件

pdfjs-dist 可以直接在浏览器中渲染 PDF 文件，需要在 HTML 中添加一个用来渲染 PDF 的 canvas。

<canvas id="pdf-render"></canvas>

然后，就可以使用 pdfjs-dist 的 PDF 渲染器进行 PDF 文件的渲染了。

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

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

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

获取 PDF 文件信息

pdfjs-dist 还提供了许多 API 接口，可以让我们方便地获取 PDF 文件的信息。

例如，通过 pdf.numPages 属性可以获取 PDF 文件中的总页数。

pdf.numPages.then(function (numPages) {
  console.log(`Number of pages: ${numPages}`);
});

操作 PDF 文件

pdfjs-dist 还提供了一些操作 PDF 文件的 API 接口，例如 pdf.deletePage() 可以用来删除 PDF 文件中的某一页。

const pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
  const pageIndex = pageNumber - 1;
  pdf.deletePage(pageIndex);
});

总结

本文介绍了如何安装和使用 npm 包 pdfjs-dist 进行前端 PDF 文件的操作，并且列举了一些 pdfjs-dist 提供的 API 接口。

pdfjs-dist 的使用不仅可以方便地直接在浏览器中渲染 PDF 文件，而且还可以方便地进行一些基本的 PDF 文件操作，是前端开发中非常实用的工具包。

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