网页中使用 PDF.js 实现 PDF 查看功能：从入门到疑难解答

2024-03-09 16:30:04

在网页中使用 pdfjs 轻松显示 PDF 文件

随着 PDF 文档在数字世界中的广泛使用，在网络浏览器中无缝查看和处理 PDF 已成为一项至关重要的需求。本篇文章将深入探讨如何利用功能强大的 JavaScript 库 pdfjs 在网页中集成 PDF 查看功能，并针对常见问题提供解决方案。

加载 PDF 文档

首先，我们需要加载要显示的 PDF 文档，代码如下：

pdfjsLib.getDocument({ url: 'path/to/document.pdf' }).promise.then(function (pdfDoc) {
  // 处理 PDF 文档
});

其中，path/to/document.pdf 是 PDF 文档的 URL 或路径。

获取 PDF 页面

加载 PDF 文档后，获取要显示的页面。代码如下：

pdfDoc.getPage(1).then(function (page) {
  // 处理 PDF 页面
});

此代码获取第一页，通过调整参数可以获取其他页面。

渲染 PDF 页面

最后一步是将 PDF 页面渲染到网页中。创建 canvas 元素并使用 pdfjs 库的 render 函数进行渲染：

const canvas = document.getElementById('my-canvas');
page.render({
  canvasContext: canvas.getContext('2d'),
  viewport: page.getViewport({ scale: 1.5 })
}).promise.then(function () {
  // PDF 页面已渲染到 canvas
});

解决错误：TT: undefined function: 32 on util.js:373

你提到的错误与字体渲染有关。可以更新到 pdfjs 的最新版本或禁用 PDF.js 中的字体渲染：

pdfjsLib.disableFontFace = true;

完整示例

以下是显示 PDF 文档的完整示例代码：

<html>
<head>
  <script src="pdfjs/pdf.js"></script>
</head>
<body>
  <div id="pdf-container">
    <canvas id="my-canvas"></canvas>
  </div>

  <script>
    pdfjsLib.getDocument({ url: 'path/to/document.pdf' }).promise.then(function (pdfDoc) {
      pdfDoc.getPage(1).then(function (page) {
        const canvas = document.getElementById('my-canvas');
        page.render({
          canvasContext: canvas.getContext('2d'),
          viewport: page.getViewport({ scale: 1.5 })
        }).promise.then(function () {
          // PDF 页面已渲染到 canvas
        });
      });
    });
  </script>
</body>
</html>