html5手机端图片预览基于HTML5 构建的 Web端现代化PDF在线预览插件PDFjs

利用解释

我们可以直策应用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的内容渲染到了浏览器中，且显示了第一页，如下图所示：

如果就这样的话远远是无法知足我们利用的，因此我们来看一下它比较高等的用法，或者说大略的用法，高等的功能。

html5手机端图片预览基于HTML5 构建的 Web端现代化PDF在线预览插件PDFjs Bootstrap

利用iframe

首先我们将我们下载的js包加压，复制里面的web文件夹，粘贴到你的项目目录

然后修正你的index.html代码，首先注释掉之前引入的js代码，然后修正body，如下

随后打开我们的浏览器，你会创造一个预览的窗口

它继续了我们常用的功能，比如旋转、下载、打印、自适应缩放、放大、缩小等，我们只须要利用iframe引入我们的pdf文件即可，别的的全部交给pdf来完成，即可得到一个实现一个完全的pdf预览功能。

PDF.js三个不同层核心 - PDF的二进制格式在此层中进行阐明。
直策应用该层被认为是高等用法。
显示 - 该层构建在核心层之上，为大多数日常事情供应易于利用的界面。
Viewer - 除了供应编程API之外，PDF.js还附带一个现成的用户界面，个中包括对搜索，旋转，缩略图侧边栏和许多其他内容的支持。

PDFJS的这三层分开，让我们很好的来根据业务需求来实现我们想要的部分，其大略的api让我们得心应手，总而言之，PDFJS是一个绝佳的PDF预览办理方案。

总结

PDFJS不仅仅支持pdf的二进制文件，同样还支持base64编码的pdf，如果在你的项目中须要用到pdf的预览等功能，无疑它是一种良好的办理方案，当然想要实现相同的功能有许多办法，我们可以选择最适宜我们需求的，官方还供应了一个完全的演示Demo，如下截图，如果你以为本文对你有帮助，请麻烦转发、点赞加关注吧，后续会分享更多实用有趣的技能！