如何使用 PDF.js 加载和渲染 PDF 文件？

PDF.js是一个用于在Web浏览器中加载和渲染PDF文件的JavaScript库。下面是使用PDF.js加载和渲染PDF文件的步骤：

1. 引入PDF.js库：首先，在你的HTML文件中引入PDF.js库。你可以从官方网站（https://mozilla.github.io/pdf.js/）下载最新版本的PDF.js库，然后将其引入到你的HTML文件中。

<script src="path/to/pdf.js"></script>

2. 创建一个用于显示PDF的容器：在HTML文件中创建一个用于显示PDF的容器，例如一个div元素。

<div id="pdfContainer"></div>

3. 加载和渲染PDF文件：使用PDF.js库提供的API加载和渲染PDF文件。首先，创建一个PDF文档对象，然后使用该对象加载PDF文件，并将其渲染到指定的容器中。

// 获取PDF容器元素
const container = document.getElementById('pdfContainer');

// 创建PDF文档对象
const loadingTask = pdfjsLib.getDocument('path/to/pdf_file.pdf');

// 加载并渲染PDF文件
loadingTask.promise.then((pdf) => {
  // 获取第一页
  pdf.getPage(1).then((page) => {
    const scale = 1.5;
    const viewport = page.getViewport({ scale });

    // 创建一个canvas元素用于渲染页面
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 将canvas元素添加到容器中
    container.appendChild(canvas);

    // 渲染页面到canvas上下文中
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

以上代码将加载并渲染PDF文件的第一页到指定的容器中。