pdf.js 读取本地pdf

PDF.js 是一个由Mozilla开发的、用于解析和渲染PDF文件的开源JavaScript库。它可以在现代浏览器中直接运行，无需任何插件。以下是关于PDF.js的一些基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

PDF.js通过JavaScript将PDF文件转换为可在网页上显示的格式。它使用HTML5的Canvas元素来渲染PDF页面，从而实现PDF文件的在线预览。

优势

跨平台兼容性：可以在任何支持HTML5的浏览器中运行。
无需插件：不需要安装额外的软件或浏览器插件。
开源：源代码公开，便于社区贡献和改进。
灵活性：可以根据需要进行定制和扩展。

类型

PDF.js主要分为两个版本：

完整版：包含所有功能，适用于开发和调试。
最小版：仅包含核心功能，体积更小，适用于生产环境。

应用场景

在线文档预览：网站提供PDF文件下载链接的同时，允许用户在线预览文件内容。
电子书阅读器：构建基于Web的电子书阅读平台。
表单填写与提交：允许用户在网页上填写PDF表单并提交。

示例代码

以下是一个简单的示例，展示如何使用PDF.js读取并显示本地PDF文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF.js Example</title>
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <canvas id="pdf-canvas"></canvas>
    <script>
        // 设置PDF.js的workerSrc属性
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

        // 加载PDF文件
        var url = './excels/yourfile.pdf'; // 替换为你的PDF文件路径
        var loadingTask = pdfjsLib.getDocument(url);

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

                // 准备canvas元素
                var canvas = document.getElementById('pdf-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

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