js怎么实现显示本地pdf文件

在网页中显示本地PDF文件，可以通过以下几种方法实现：使用HTML5的<embed>标签、使用PDF.js库、使用第三方插件。下面我们详细介绍如何使用这些方法来实现显示本地PDF文件。

一、使用HTML5的`<embed>`标签

HTML5提供了简单的方法来嵌入PDF文件。使用<embed>标签可以非常轻松地在网页中显示PDF文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF</title>
</head>
<body>
    <h1>Display PDF using embed tag</h1>
    <embed src="path/to/your/localfile.pdf" type="application/pdf" width="600" height="500">
</body>
</html>

优点：简单、直接、无需第三方库。
缺点：不适合需要复杂交互的情况。

二、使用PDF.js库

PDF.js是一个强大的开源库，由Mozilla维护，专门用于在网页中渲染PDF文件。它允许你在浏览器中直接显示PDF，并提供了丰富的API来进行自定义。

1、引入PDF.js库

首先，需要在HTML文件中引入PDF.js库。你可以从PDF.js GitHub页面下载PDF.js，或者通过CDN引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
    <h1>Display PDF using PDF.js</h1>
    <canvas id="pdf-canvas"></canvas>
    <script>
        const url = 'path/to/your/localfile.pdf';
        // Asynchronously download the PDF
        pdfjsLib.getDocument(url).promise.then(function(pdf) {
            // Fetch the first page
            pdf.getPage(1).then(function(page) {
                const scale = 1.5;
                const viewport = page.getViewport({scale: scale});
                // Prepare canvas using PDF page dimensions
                const canvas = document.getElementById('pdf-canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                // Render PDF page into canvas context
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });
    </script>
</body>
</html>

优点：功能强大、可定制性高、提供丰富的API。
缺点：需要学习和配置，代码相对复杂。

三、使用第三方插件

除了使用内置的HTML标签和PDF.js库，还可以使用一些第三方插件来显示PDF文件。这些插件通常提供了更丰富的功能和更简单的使用方法。例如，ViewerJS是一个开源的文档查看器，支持PDF、ODF等格式。

1、使用ViewerJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.css">
</head>
<body>
    <h1>Display PDF using ViewerJS</h1>
    <div id="pdf-viewer">
        <iframe src="https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/#../path/to/your/localfile.pdf" width="600" height="500" allowfullscreen webkitallowfullscreen></iframe>
    </div>
</body>
</html>

优点：使用简单、功能丰富。
缺点：依赖外部库，可能需要额外配置。

四、文件选择和展示

为了实现从本地选择PDF文件并在网页中显示，可以使用文件输入元素结合上面的PDF.js库来完成。

1、HTML文件选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
    <h1>Select and Display PDF</h1>
    <input type="file" id="file-input" accept="application/pdf">
    <canvas id="pdf-canvas"></canvas>
    <script>
        document.getElementById('file-input').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file.type === 'application/pdf') {
                const fileReader = new FileReader();
                fileReader.onload = function() {
                    const typedArray = new Uint8Array(this.result);
                    pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
                        pdf.getPage(1).then(function(page) {
                            const scale = 1.5;
                            const viewport = page.getViewport({scale: scale});
                            const canvas = document.getElementById('pdf-canvas');
                            const context = canvas.getContext('2d');
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;
                            const renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            page.render(renderContext);
                        });
                    });
                };
                fileReader.readAsArrayBuffer(file);
            } else {
                alert('Please select a PDF file.');
            }
        });
    </script>
</body>
</html>

五、总结

通过以上方法，使用HTML5的<embed>标签、使用PDF.js库、使用第三方插件，都可以实现显示本地PDF文件。每种方法都有其优缺点，可以根据实际需求选择合适的方式。

使用HTML5的<embed>标签，适用于简单的嵌入需求；使用PDF.js库，适用于需要高度定制和复杂交互的场景；使用第三方插件，则可以快速实现丰富功能。结合文件选择功能，可以让用户从本地选择PDF并在网页中展示，实现更加友好的用户体验。