HTML 在线 PDF 阅读代码示例 - 如何在网页中嵌入 PDF 文件并在线阅读 - 常规

以下是一个简单的 HTML 代码示例，用于在网页中嵌入 PDF 文件并实现在线阅读：

<!DOCTYPE html>
<html>
<head>
    <title>PDF 阅读器</title>
    <style>
        #pdf-container {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id='pdf-container'></div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js'></script>
    <script>
        // PDF.js相关配置
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.worker.min.js';

        // 获取PDF文件URL
        var pdfUrl = 'https://down.wss.show/wscctc3/c/e1/ce1mwscctc3?cdn_sign=1696946519-87-0-57ad5565bb35edf4244b0b69687941f5&exp=1200&response-content-disposition=attachment%3B%20filename%3D'小学同步练习数学强化训练五年级.pdf'%3B%20filename%2A%3Dutf-8'%27'%25E5%25B0%258F%25E5%25AD%25A6%25E5%2590%258C%25E6%25AD%25A5%25E5%25A5%25A5%25E6%2595%25B0%25E5%25BC%25BA%25E5%258C%2596%25E8%25AE%25AD%25E7%25BB%2583%25E4%25BA%2594%25E5%25B9%25B4%25E7%25BA%25A7.pdf';

        // 创建PDF阅读器
        var pdfContainer = document.getElementById('pdf-container');

        pdfjsLib.getDocument({ url: pdfUrl }).promise.then(function (pdfDoc) {
            // 加载第一页
            pdfDoc.getPage(1).then(function (page) {
                var scale = 1.5;
                var viewport = page.getViewport({ scale: scale });

                // 创建Canvas元素用于渲染PDF页面
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                pdfContainer.appendChild(canvas);

                // 渲染页面
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        });
    </script>
</body>
</html>

在上面的示例中，我们使用了 PDF.js 库来处理和渲染 PDF 文件。首先，我们在 <head> 标签中引入了 PDF.js 的核心库文件。然后，在 <body> 标签中创建了一个用于显示 PDF 页面的容器 <div id='pdf-container'></div>。

在 JavaScript 部分，我们首先配置了 PDF.js 的工作线程路径，然后获取了 PDF 文件的 URL。接下来，我们通过 pdfjsLib.getDocument() 方法获取 PDF 文档对象，并根据需要加载指定页码的页面。在加载页面后，我们创建了一个 Canvas 元素用于渲染 PDF 页面，并使用 page.render() 方法将页面渲染到 Canvas 上。最后，我们将 Canvas 元素添加到容器中，以显示 PDF 页面。

请注意，为了使上述示例正常工作，您需要将 PDF.js 库的 CDN 链接和 PDF 文件的 URL 替换为适用于您的环境的链接。

HTML 在线 PDF 阅读代码示例 - 如何在网页中嵌入 PDF 文件并在线阅读