JS预览PDF文件|极客笔记

JS预览PDF文件

在网页开发中，有时候我们需要让用户能够预览PDF文件，这样用户就可以直接在浏览器中查看内容而无需下载文件。本文将介绍如何使用JavaScript来实现在网页中预览PDF文件的功能。

1. 使用`<embed>`标签

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

<!DOCTYPE html>
<html>
<head>
    <title>预览PDF文件</title>
</head>
<body>
    <embed src="example.pdf" style="width: 100%; height: 100vh;">
</body>
</html>

在上面的代码中，我们使用<embed>标签来嵌入名为example.pdf的PDF文件。通过设置style属性，我们使PDF文件充满整个窗口。用户可以直接在浏览器中查看PDF文件的内容。

2. 使用PDF.js库

PDF.js是Mozilla开发的一个开源JavaScript库，用于在网页中呈现PDF文件。我们可以通过引入PDF.js库来实现在网页中预览PDF文件的功能。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>预览PDF文件</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdf-viewer"></canvas>
    <script>
        // 引入PDF文件
        const pdfUrl = 'example.pdf';

        // 获取canvas元素
        const canvas = document.getElementById('pdf-viewer');

        // 加载PDF文件
        pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
            pdf.getPage(1).then(page => {
                const scale = 1;
                const viewport = page.getViewport({ scale: scale });
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: canvas.getContext('2d'),
                    viewport: viewport
                };

                page.render(renderContext);
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们引入了PDF.js库，并使用其提供的方法加载PDF文件。在加载完成后，我们获取第一个页码的内容，并在一个canvas元素中渲染出来。用户可以在网页中直接查看PDF文件的内容。