大家好。上半年比较忙，还没发文章。有人想念我。这两天发现总是有私信问我PDF相关的内容。好吧，为了安心钓鱼，我准备发一篇文章介绍如何使用PDFJS。PDF.js是什么？PDF.js由Mozilla提供支持。目标是创建一个通用的、基于Web标准的平台来解析和呈现PDF。预览PDF使用iframe、embed、新窗口打开测试地址。解决方案相对简单。如何使用测试结果浏览器兼容性图Chrome(PC)(Mac)支持Safari(PC)(Mac)支持Firefox(PC)(Mac)支持Firefox(PC)(Windows)支持Edge(PC)(Windows)支持IE(PC)(Windows)不支持微信(Android)(vivox27)不支持Chrome(Android)(vivox27)不支持QQ浏览器(Android)(vivox27)不支持优点：简单，支持大部分PC浏览器（IE不支持）。跨域资源也是可以的（没有cors）。缺点：不支持手机浏览器，不支持IE等低版本浏览器。样式无法自定义。pdfjs-view测试地址，方案兼容性比较好，资源需要同域或者cors跨域，可以自定义样式。使用方法自己部署一个pdfjs-view。（推荐，更稳定）下载工程，工程分为/web/viewer-1.html和/legacy/web/viewer.html两个版本。Legacy支持低版本浏览器，使用es5编写。采用这种方案是合理的，同时你也必须兼容所有的浏览器。（如果没有，使用gulpgeneric-legacy生成一个）然后将相关内容复制到你的目录下，上传到FTP。本质上，它是一个HTML文件，所以你可以对其进行一些修改，比如主题颜色、隐藏下载按钮等等。使用CDN或官方pdfjs-view。（不推荐，不稳定，CORS异常）https://mozilla.github.io/pdf.js/legacy/web/viewer.htmlhttps://mozilla.github.io/pdf.js/web/viewer.html测试结果浏览器兼容性兼容性ES5版本图Chrome(PC)(Mac)SupportsSafari(PC)(Mac)SupportsFirefox(PC)(Mac)SupportsFirefox(PC)(Windows)supportsEdge(PC）（Windows）支持IE（PC）（Windows）不支持微信（Android）（vivox27）支持Chrome（Android）（vivox27）支持QQ浏览器（Android）（vivox27）支持同上，你可以看到IE支持，mobi乐终端也行。优点：支持大部分浏览器（PC端和M端都支持）。跨源资源需要cors。样式可以定制。缺点：需要部署视图。pdfjs-canvas测试地址，方案比较复杂，需要自己实现一套预览支持内容（分页，放大缩小）。如何使用)}el.innerHTML=''letwinW=document.documentElement.clientWidth//加载pdf资源letloadingTask=pdfjsLib.getDocument('https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf')//PDF加载的回调loadingTask.promise.then(function(pdf){console.log('pdf',pdf)//可以得到总页数。让pageNum=pdf.numPagesvar_pageNum=1;varrenderPageToCanvas=function(pageNum,auto=false){//获取其中一页pdf.getPage(pageNum).then(function(page){//你现在可以在这里使用*page*_pageNum=pageNum//获取原始页面大小数据varviewport=page.getViewport({scale:1,});varscale=(500/viewport.width).toFixed(2)viewport=page.getViewport({scale:scale});varcanvas=document.createElement('canvas');el.appendChild(canvas)varcontext=canvas.getContext('2d');canvas.height=viewport.height;canvas.width=viewport.width;//创建画布画板来存储varrenderContext={canvasContext:上下文,视口：视口};page.render(renderContext);如果（自动）renderPageToCanvas（pageNum+1，自动）；});}renderPageToCanvas(_pageNum,true);canvasPrev.onclick=function(){renderPageToCanvas(Math.max(_pageNum-1,1));}canvasNext.onclick=function(){renderPageToCanvas(Math.min(_pageNum+1,pdf.numPages));}},function(reason){console.error(reason)})})()测试结果浏览器兼容性图Chrome(PC)(Mac)supportssafari(PC)(Mac)supportsFirefox(PC)(Mac)supportsFirefox(PC)(Windows)支持Edge(PC)(Windows)支持IE(PC)(Windows)不支持微信(Android)(vivox27)支持Chrome(Android)(vivox27)支持QQ浏览器(Android)(vivox27)兼容也是可以的，下载PDF需要依赖canvas下载头直接打开。如果浏览器不支持解析PDF，可以触发下载。如果浏览器支持解析PDF，就会变成预览。这时候我们可以在a标签中加上download来触发下载。（需要同域）综上所述，通过以上内容，我们可以实现前端预览PDF功能。让我们总结一下每个解决方案的特点。解决方案移动PC（高版本浏览器）PC（IE，低版本浏览器）跨域复制内容自定义样式（分页、下载等）iframe?（平台不支持）??（平台不支持）???embed?（平台不支持）??（平台不支持）?（CORS）??pdfjs-view???（ES6新特性）?（CORS）??（在原有基础上修改)pdfjs-view-es5????(CORS)??(在原有基础上修改)pdfjs-canvas???(canvas)?(CORS)?(canvas)?(需要实现一整套自己操作）好的，还有什么需要的请留言。我会把它更新进去。
