基于HTML5 构建的 Web端现代化PDF在线预览插件——PDF.js
引言
PDF文件现在在许多企业中常用 - 无论您是要生成销售报告，交付合同还是发送发票，PDF都是首选的文件类型。PDF.js是由Mozilla编写的JavaScript库。由于它使用vanilla JavaScript实现PDF渲染，因此它具有跨浏览器兼容性，并且不需要安装其他插件。在使用PDFJS之前你也可以先了解下原生的PDF<object>对象，本文仅介绍PDFJS。
官网地址
https://mozilla.github.io/pdf.js/
下载和安装
官网提供了下载入口,有稳定版和Beta版,我们要在生产环境下使用建议使用稳定版,官网给我们提供了三种获取PDF.js的方式
使用说明
我们可以直接使用cdn服务，也可以将下载的文件引入，我们看一下示例代码，这里我提供了两种写法，在项目运行之前，请确保你的同级目录下有一个test.pdf文件
//index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script><script src=./index.js></script><title>PDF</title></head><body><canvas id="pdf"></canvas></body></html>//index.js// var loadingTask = pdfjsLib.getDocument("test.pdf");// loadingTask.promise.then(// function(pdf) {// // 加载第一页// pdf.getPage(1).then(function(page) {// var scale = 1;// var viewport = page.getViewport(scale);// //应用到页面的canvas上.// var canvas = document.getElementById("pdf");// var context = canvas.getContext("2d");// canvas.height = viewport.height;// canvas.width = viewport.width;// // 渲染canvas.// var renderContext = {// canvasContext: context,// viewport: viewport// };// page.render(renderContext).then(function() {// console.log("Page rendered!");// });// });// },// function(reason) {// console.error(reason);// }// );// index.js(async () => {const loadingTask = pdfjsLib.getDocument("test.pdf");const pdf = await loadingTask.promise;// 加载第一页.const page = await pdf.getPage(1);const scale = 1;const viewport = page.getViewport(scale);// 应用到页面的canvas上.const canvas = document.getElementById("pdf");const context = canvas.getContext("2d");canvas.height = viewport.height;canvas.width = viewport.width;// 渲染canvas.const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);})();当我们运行项目之后，打开浏览器查看，它已经将pdf的内容渲染到了浏览器中，且显示了第一页，如下图所示：
如果就这样的话远远是无法满足我们使用的，因此我们来看一下它比较高级的用法，或者说简单的用法，高级的功能。
使用iframe
首先我们将我们下载的js包加压，复制里面的web文件夹，粘贴到你的项目目录
然后修改你的index.html代码，首先注释掉之前引入的js代码，然后修改body，如下
<body><iframe src="test.pdf" style="border: none;" width="100%" height=1000px></iframe></body>随后打开我们的浏览器，你会发现一个预览的窗口
它继承了我们常用的功能，比如旋转、下载、打印、自适应缩放、放大、缩小等，我们只需要使用iframe引入我们的pdf文件即可，其余的全部交给pdf来完成，即可获得一个实现一个完整的pdf预览功能。
PDF.js三个不同层
核心 - PDF的二进制格式在此层中进行解释。直接使用该层被认为是高级用法。显示 - 该层构建在核心层之上，为大多数日常工作提供易于使用的界面。Viewer - 除了提供编程API之外，PDF.js还附带一个现成的用户界面，其中包括对搜索，旋转，缩略图侧边栏和许多其他内容的支持。PDFJS的这三层分开，让我们很好的来根据业务需求来实现我们想要的部分，其简单的api让我们得心应手，总而言之，PDFJS是一个绝佳的PDF预览解决方案。
总结
PDFJS不仅仅支持pdf的二进制文件，同样还支持base64编码的pdf，如果在你的项目中需要用到pdf的预览等功能，无疑它是一种良好的解决方案，当然想要实现相同的功能有许多办法，我们可以选择最适合我们需求的，官方还提供了一个完整的演示Demo，如下截图，如果你觉得本文对你有帮助，请麻烦转发、点赞加关注吧，后续会分享更多实用有趣的技术！
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据