pdfjs-dist使用

PDF.js是一个用于在Web上呈现PDF文档的JavaScript库。你可以使用pdfjs-dist来引入并使用该库。下面是一些基本的使用步骤：

1. 首先，下载pdfjs-dist库。你可以从PDF.js的官方GitHub仓库中获取最新版本的库文件：https://github.com/mozilla/pdf.js/releases

2. 解压缩下载的文件，你将会看到一个名为`pdfjs-dist`的文件夹。

3. 将`pdfjs-dist`文件夹中的`build`文件夹复制到你的项目中。

4. 在你的HTML文件中引入`pdf.js`和`pdf.worker.js`这两个脚本文件。你可以使用以下代码片段：

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

请确保将`path/to/`替换为实际的文件路径。

5. 创建一个用于呈现PDF文档的容器元素。例如，你可以在HTML中添加一个带有id属性的div元素：

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

6. 使用JavaScript代码加载并呈现PDF文档。你可以使用以下代码示例：

// 获取用于呈现PDF的容器元素
const container = document.getElementById('pdfContainer');

// 使用PDF.js加载PDF文档
PDFJS.getDocument('path/to/pdf/document.pdf').promise.then(pdf => {
  // 获取第一页
  pdf.getPage(1).then(page => {
    // 创建一个canvas元素来显示页面内容
    const canvas = document.createElement('canvas');
    container.appendChild(canvas);

    // 设置canvas的尺寸
    const viewport = page.getViewport({ scale: 1 });
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 将页面呈现到canvas上
    const renderContext = {
      canvasContext: canvas.getContext('2d'),
      viewport: viewport
    };
    page.render(renderContext);
  });
});

确保将`path/to/pdf/document.pdf`替换为实际的PDF文档路径。

这只是一个简单的示例，你可以根据自己的需求进行进一步的定制和扩展。你可以在PDF.js的官方文档中找到更多关于使用pdfjs-dist的信息：https://mozilla.github.io/pdf.js/