在浏览器中轻松渲染 PDF 文件

如何从 PDF 中提取页面并使用 JavaScript 渲染它们（下）

    <br>

    #### 

    <br>

    #### 

    <br>

    #### 

    <br>

    ## 1. 通过 File API 读取文件

    在对我们的 PDF 文档进行任何操作之前，我们必须从用户那里获取文档。在浏览器中读取任何文件都可以通过`FileReader`Web API 处理。 首先，我们将制作文件输入按钮，然后使用`File API`读取用户选择的文件，将其转换为`ArrayBuffer`，最后，我们使用`PDF.js`加载并解析`ArrayBuffer`。

    ### 代码演示:

    ```html
    <input type="file" id="file-input" accept=".pdf" />
    ```

    ```javascript
    const fileInput = document.getElementById('file-input');
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const fileReader = new FileReader();
        fileReader.onload = () => {
            const arrayBuffer = fileReader.result;
            // 现在我们拥有了包含 PDF 内容的 ArrayBuffer，我们可以使用 PDF.js 加载并解析它
        };
        fileReader.readAsArrayBuffer(file);
    });
    ```

    ## 2. 使用 PDF.js 加载和解析 PDF 文档

    一旦我们有了 PDF 文档的`ArrayBuffer`，我们就需要使用`PDF.js`库来加载和解析它。我们将使用`PDF.js`的`getDocument`函数，该函数接受`ArrayBuffer`作为参数，并返回一个`PDFDocumentProxy`对象。我们可以使用此对象来获取文档的信息，例如页面数和页面大小。

    ### 代码演示:

    ```javascript
    PDFJS.getDocument(arrayBuffer).then((pdf) => {
        // 现在我们拥有了 PDF 文档，我们可以使用它来渲染页面
    });
    ```

    ## 3. 使用 Canvas 和 HTML5 绘图 API 渲染 PDF 页面

    现在，我们已经加载并解析了 PDF 文档，我们需要使用 Canvas 和 HTML5 绘图 API 来渲染页面。我们将使用`PDF.js`的`getPage`函数来获取文档中的特定页面，然后使用`Canvas`的`getContext`函数来获取它的绘图上下文。我们可以使用绘图上下文来绘制页面的内容。

    ### 代码演示:

    ```javascript
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    pdf.getPage(pageNumber).then((page) => {
        const viewport = page.getViewport({ scale: 1 });
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        const renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };
        page.render(renderContext);
    });
    ```

    ## 4. 在浏览器中显示渲染后的页面

    现在，我们已经渲染了 PDF 页面，我们需要在浏览器中显示它。我们可以使用`Canvas`的`toDataURL`函数将`Canvas`转换为`DataURL`，然后使用`<img>`标签将`DataURL`显示在页面上。

    ### 代码演示:

    ```html
    <img id="rendered-page" src="" alt="Rendered Page" />
    ```

    ```javascript
    const renderedPage = document.getElementById('rendered-page');
    renderedPage.src = canvas.toDataURL();
    ```

    ## 结语

    使用`PDF.js`和`HTML5`的`Canvas`，我们可以轻松地从 PDF 文档中提取页面并使用 JavaScript 在浏览器中进行渲染。希望本文对您有所帮助。