1.官网：https://mozilla.github.io/pdf.js/

2、使用方法

1）通过官网，下载pdfJs插件包，放至项目中；

 window.open("./js/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );

2）将下载的pdfJS插件包放至服务器中将pdfJS项目跑起来，本案例中将pdfJS文件通过tomcat部署

3）当文件和viewer.html不同路径时（千万注意文件路径，否则无法正常预览）

4）当文件为远程服务器上的文件，我们有文件的路径时，需要将http路径进行转码：

function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf"  );//文件和viewer.html同路径// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径// window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径，注意路径 let fileUrl = encodeURIComponent('http://10.162.201.40:8005/dev/leck/2022/0215/11_.122qqq_1_092319.pdf') //将路径转码window.open("http://localhost:8888/pdfJS/web/viewer.html?file=" + fileUrl);}

（如预览远程服务器上的文件跨域：

则将vierwe.js中跨域认证注释即可（亲测有效）：
将远程文件换成文件流，直接当参数传递：file=文件流数据（未尝试）
）

注：以上四种写法的效果如下所示：

// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf"  );//文件和viewer.html同路径
// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径
window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf");//文件和viewer.html 不同路径，注意路径

5）通过引用插件包中的pdf.js，读出pdf文件中的内容，通过画布在页面中渲染出来，
所有该方法有几个弊端：

只能将pdf一页一页的渲染，需要自己做分页器；
翻页效果没有上述直接通过路径预览pdf的方式效果美观；
如果要下载打印等操作，需要自己去实现相关功能，但上述直接通过路径预览pdf的方式中有附带这些功能，也可将其隐藏；

实现该预览方式，主要有以下几个步骤：

引入pdf.js
获取pdf信息：pdfjsLib.getDocument(’./files/AngularJS权威指南.pdf’) ，该方法放回的是promise，通过loadingTask.promise.then(function(pdf) {}) 可拿到pdf；
拿到pdf信息后，对pdf操作，pdf.getPage(pageNum).then(function(page) {}），至此已拿到单独一页的信息，通过canvas将page渲染即可
代码如下所示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#pdfBD {margin-left: 50%;transform: translateX(-50%);}#pdf-pagination {position: fixed;width: 100%;font-size: 14px;top: 100px;left: 10 px;z-index: 100;}span {margin-right: 10px;cursor: pointer;}</style></head><body><canvas id="pdfBD"> </canvas><div id="pdf-pagination"><span id="before" onclick="paginationClick(-1)">上一页</span><span id="current">1</span><span id="next" onclick="paginationClick(1)">下一页</span></div></body><!-- <script src="https://lib.baomitu.com/pdf.js/2.7.570/pdf.js" type="text/javascript" charset="utf-8"></script> --><script src="js/pdfJS/build/pdf.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">let pdfValue = null;let pageContent = {//法二，读取到的pdf信息记录currentPage: 0,//当前页countPage: 0,//总页数 }window.onload = function() {// methodsOne()methodsTwo()}function methodsOne() { //法一// window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf"  );//文件和viewer.html同路径// window.open("http://localhost:8888/pdfJS/web/viewer.html?file=AngularJS权威指南.pdf" );//文件和viewer.html同路径window.open("./js/pdfJS/web/viewer.html?file=/pdf/files/AngularJS权威指南.pdf"); //文件和viewer.html 不同路径，注意路径 document.getElementById("pdf-pagination").display = 'none'; //隐藏分页器}function methodsTwo() { //法二var loadingTask = pdfjsLib.getDocument('./files/AngularJS权威指南.pdf');loadingTask.promise.then(function(pdf) {console.log(pdf)pdfValue = pdf;pageContent.countPage = pdf.numPages;changePage(pdf, 1)});document.getElementById("pdf-pagination").display = 'block'; //显示分页器}//翻页 type：1 下一页；-1：上一页function paginationClick(type) {if (type == 1) {//下一页pageContent.currentPage == pageContent.countPage ? "" : pageContent.currentPage += 1} else {//上一页pageContent.currentPage == 1 ? "" : pageContent.currentPage -= 1}document.getElementById("current").innerHTML = pageContent.currentPagechangePage(pdfValue, pageContent.currentPage)}//通过页码，渲染当前页currentPage信息：pdf：读取的总的pdf信息，pageNum：需要获取的页数function changePage(pdf, pageNum) {if (pdf == null) return;pdf.getPage(pageNum).then(function(page) {// you can now use *page* herevar scale = 1.5;//放大倍数var viewport = page.getViewport({scale: scale,}); // Support HiDPI-screens.var outputScale = window.devicePixelRatio || 1;var canvas = document.getElementById('pdfBD');var context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height = Math.floor(viewport.height) + "px";var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :null;var renderContext = {canvasContext: context,transform: transform,viewport: viewport};page.render(renderContext);});}</script></html>

注：
该方法的预览效果如下（此处页面布局和分页器仅简单实现功能）

【完】

pdf在线预览 pdf.js的使用相关推荐

网页中实现安卓手机在线预览PDF文件
写在前面:本文为转载,原文链接:https://blog.csdn.net/super_DuoLa/article/details/90207965原文链接苹果手机可以直接在线预览PDF文件,而安卓 ...
PDF在线预览插件touchPDF.js：手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
pdf.js使用（在线预览pdf文件）
最近公司需要pdf在线预览,于是找到pdf.js这个插件 , 好处就在于 pc端和移动端不需要花过多的精力去调. 1:需要到官网下载源码:https://mozilla.github.io/pdf. ...
spring boot2.X word在线预览 pdf.js
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑.在此记录我是如何做的. 针对word的在线预览网上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
pdf在线预览解决方案——pdf.js使用
业务背景在C端的前端项目中,针对用户会有多种规则需要展示,之前的处理方案是将这些规则写成一个个的静态页面,用户来访问这些页面.但如果这些规则需要变更的话,就需要前端修改对应的规则页面的文案,重新发版 ...
vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...

pdf在线预览 pdf.js的使用

1.官网：https://mozilla.github.io/pdf.js/

2、使用方法

pdf在线预览 pdf.js的使用相关推荐

最新文章

热门文章