JS 预览 PDF|极客笔记

JS 预览 PDF

在网页开发中，有时候我们需要在网页中展示 PDF 文件，而不是让用户下载文件后再查看。这种需求经常出现在一些在线学习平台、文档管理系统等场景中。本文将介绍如何使用 JavaScript 在网页中预览 PDF 文件。

方法一：使用 `<embed>` 标签

最简单的方法是使用 <embed> 标签来嵌入 PDF 文件。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview PDF</title>
</head>
<body>
    <embed src="example.pdf" type="application/pdf" width="100%" height="600px">
</body>
</html>

在上面的代码中，我们使用 <embed> 标签并设置 src 属性为 PDF 文件的链接，type 属性为 application/pdf，width 和 height 属性可以根据需求自行设置。

方法二：使用 PDF.js

PDF.js 是一个由 Mozilla 开发的用于在网页中显示 PDF 文件的 JavaScript 库。它可以将 PDF 文件渲染成 canvas 元素，从而在网页上展示 PDF 内容。以下是使用 PDF.js 的示例代码：

首先，在 head 标签中引入 PDF.js 文件：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

然后在 JavaScript 中编写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview PDF</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdfViewer" style="border: 1px solid black;"></canvas>
    <script>
        // PDF 文件地址
        const pdfUrl = 'example.pdf';

        // 获取显示 PDF 的 canvas 元素
        const pdfContainer = document.getElementById('pdfViewer');

        // 异步加载 PDF 文件
        pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
            pdf.getPage(1).then(page => {
                const scale = 1.5;
                const viewport = page.getViewport({ scale });

                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                pdfContainer.appendChild(canvas);

                page.render({ canvasContext: context, viewport });
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们首先引入 PDF.js 文件，然后通过 pdfjsLib.getDocument() 方法来获取 PDF 文件，再使用 page.render() 方法将 PDF 文件渲染到 canvas 元素中。需要注意的是，由于渲染 PDF 文件是一个异步操作，因此我们需要使用 promise 来处理。

方法三：使用 PDFObject.js

PDFObject.js 是一个方便的 JavaScript 库，可以简化在网页中预览 PDF 文件的过程。以下是使用 PDFObject.js 的示例代码：

首先，在 head 标签中引入 PDFObject.js 文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>

然后在 JavaScript 中编写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script>
</head>
<body>
    <div id="pdfViewer"></div>
    <script>
        // PDF 文件地址
        const pdfUrl = 'example.pdf';

        // 将 PDF 文件嵌入到指定的 div 元素中
        pdfObject.embed(pdfUrl, '#pdfViewer');
    </script>
</body>
</html>

在上面的代码中，我们引入 PDFObject.js 文件，并使用 pdfObject.embed() 方法将 PDF 文件嵌入到指定的 div 元素中。这样可以更加方便地在网页中预览 PDF 文件。

以上是三种常见的在网页中预览 PDF 文件的方法，根据具体需求可以选择适合的方法来实现。