pdf.js demo

作者：ˉ吻干迩的'泪发布日期:2025-02-08 浏览:55

<!DOCTYPE html>
<html>
<head>
    <title>PDF.js Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head>
<body>
    <h1>PDF.js Demo</h1>
    <canvas id="pdfCanvas"></canvas>

    <script>
        // 加载 PDF 文件
        pdfjsLib.getDocument('sample.pdf').promise.then(function(pdf) {
            console.log('PDF loaded');

            // 获取第一页
            pdf.getPage(1).then(function(page) {
                var scale = 1.5;
                var viewport = page.getViewport({scale: scale});

                // 准备 canvas 元素用于渲染页面
                var canvas = document.getElementById('pdfCanvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // 渲染 PDF 页面到 canvas 上
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }, function (reason) {
            console.error(reason);
        });
    </script>
</body>
</html>

解释说明：

HTML 结构:
- 使用了一个 <canvas> 元素来显示 PDF 页面。
加载 PDF 文件:
- 使用 pdfjsLib.getDocument 方法加载 PDF 文件。这里使用的是一个名为 sample.pdf 的文件，你可以根据需要替换为其他 PDF 文件的路径。
获取并渲染 PDF 页面:
- 使用 pdf.getPage(1) 获取 PDF 文件的第一页。
- 设置缩放比例 (scale) 和视口 (viewport)。
- 使用 canvas 元素和其上下文 (context) 来准备渲染区域。
- 最后调用 page.render 方法将 PDF 页面渲染到 canvas 上。
错误处理:
- 如果加载 PDF 文件时出现错误，会在控制台输出错误信息。

上一篇：js iframe数据交互

下一篇：js 防止冒泡