【亲测免费】 PDF.js 在线预览与打印Demo

欢迎使用PDF.js纯JavaScript实现的PDF在线预览及打印解决方案。本仓库提供了一个完整的Demo示例，帮助开发者轻松集成PDF在线查看功能到自己的项目中，同时支持用户自定义页面缩放和打开本地PDF文件的能力。

特性

• 纯JavaScript: 完全基于JavaScript编写，无需依赖其他插件。
• 在线预览: 实现流畅的PDF文档在线浏览体验。
• 缩放控制: 用户可以自由调整查看PDF文件时的缩放比例，便于阅读。
• 本地文件支持: 允许用户选择并预览本地存储的PDF文件。
• 打印功能: 直接从浏览器打印PDF文档，提升用户体验。

快速入门

1. 下载资源：首先，克隆或下载本仓库中的资源至您的项目目录。
2. 引入资源：在您的HTML文件中，确保引入了PDF.js的相关JavaScript和CSS文件。
3. 初始化预览：通过JavaScript调用相关的PDF.js函数，初始化PDF预览区域。
4. 添加用户交互：实现按钮或其他控件来触发PDF的加载、缩放、以及打印操作。
5. 处理本地文件：利用File API来读取用户选择的本地PDF文件，并将其传递给PDF.js进行渲染。

示例代码片段

这里是一个简化的示例，展示如何初始化PDF预览：

<script src="path/to/pdf.js"></script>
<button id="loadPdf">加载PDF</button>
<div id="pdfViewer"></div>

<script>
document.getElementById('loadPdf').addEventListener('click', () => {
    // 假设pdf.js提供了某个方法loadPdf(url, viewerElement)
    pdfjsLib.getDocument('path/to/your/pdf.pdf').promise.then(function(pdf) {
        for (var i = 1; i <= pdf.numPages; ++i) {
            pdf.getPage(i).then(function(page) {
                var scale = 1;
                var viewport = page.getViewport({scale: scale});
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                document.getElementById('pdfViewer').appendChild(canvas);
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    });
}, function(error) {
    console.error(error);
});
</script>

请注意，实际的pdf.js库会提供更详细的API和更好的错误处理机制。请参照实际库提供的文档进行详细集成。

注意事项

• 为了兼容性和性能考虑，请确保使用的PDF.js版本与您的项目需求相匹配。
• 考虑到安全性，处理本地文件时应遵循浏览器的安全规范。
• 对于生产环境，建议进一步优化加载策略，比如异步加载大文件和分段渲染。

希望这个Demo能为你的项目增添强大的PDF处理能力，祝开发顺利！