移动端h5显示pdf的3种方法总结

移动端显示h5我目前已经尝试了3种方法：
我使用的是vue的2.X版本

1. 后端返回一个pdf的链接，然后前端直接使用location.href = ‘http://www.XXX.com/test.pdf’，这种形式苹果手机应该是没问题的，但是安卓手机默认会触发下载，所以不推荐。
2. 使用pdfjs，这是pdfjs的下载地址，点击下载之后会下载一个压缩包，里面包含build，web文件夹和LICENSE文件，把他们解压之后放在static目录下面，这里给一个目录结构（我的项目是vue2.X项目）：

|    src
|static|    pdfjs    
        |    build
        |    web

然后在使用的时候是这样的

<iframe  ref="iframeRef" frameborder="0" width="100%":src="/static/pdfView/web/viewer.html?file='XXX"/>

前面的这个

/static/pdfView/web/viewer.html

是你的静态资源路径，例如你的网页地址是

http://www.XXX.com

，那么就是

http://www.XXX.com/static/pdfView/web/viewer.html

，至于这个

viewer.html

是什么，他是pdfjs提供的一个渲染pdf的入口，也就是通过iframe内嵌viewer.html，然后通过file字段告诉

viewer.html

一些细节。file可以是

http://www.XXX.com/test.pdf

这种.pdf的形式，也可以是

http://www.XXX.com/getPdfBlob?pdfName=123_指南

，这种blob二进制流形式。
但是经过测试，我发现vivo的部分手机和iponeX无法正常显示

1. 使用pdfjs-dist （这个是最终方案），这里需要注意两个细节：

第一个是pdfjs-dist下载需要下载2.0.943版本

npm install --save [email protected]

第二个是导入的时候

const pdfJS =require("pdfjs-dist");
pdfJS.GlobalWorkerOptions.workerSrc =require("pdfjs-dist/build/pdf.worker.entry");

尤其是一定要配置

pdfJS.GlobalWorkerOptions.workerSrc

，

pdfjs-dist

里面需要引入

pdf.work.js

，但是静态资源会被重定向到index.html，所以一定要配置

pdfJS.GlobalWorkerOptions.workerSrc

。

基本起步就是这些，我把我的一些代码粘贴到这里。我这里获取的pdf是二进制流的形式：

<template><div class="canvas-container"><canvas class="pdf-container" v-for="page in numPages":key="page":ref="'myCanvas_' + page"></canvas></div></template><script>const pdfJS =require("pdfjs-dist");import{ getPDFBlob }from"@/api"

pdfJS.GlobalWorkerOptions.workerSrc =require("pdfjs-dist/build/pdf.worker.entry");exportdefault{created(){getPDFBlob("http://www.XXX.com/getPdfBlob?pdfName=123_指南").then((res)=>{let fileURL =URL.createObjectURL(res.data)this.renderPage(fileURL);}).catch((error)=>{
        console.log("error", error);});},data(){return{numPages:0}},methods:{renderPage(pdfUrl){let pdfData = pdfJS.getDocument(pdfUrl);
      pdfData.promise.then((pdf)=>{this.numPages = pdf.numPages
        for(let i =1; i <=this.numPages; i++){
          pdf.getPage(i).then((page)=>{let canvas =this.$refs['myCanvas_'+ i][0];let viewport = page.getViewport(3);
            canvas.height = viewport.height;
            canvas.width = viewport.width;let ctx = canvas.getContext("2d");let renderContext ={canvasContext: ctx,viewport: viewport,};
            page.render(renderContext)});}});},}};</script><style scoped>.canvas-container {width:100%;overflow: hidden;}.pdf-container {width:100%;}</style>

这里有两个需要注意的：

**第一个是

import { getPDFBlob } from “@/api”

里面的

getPDFBlob 

是一个方法，他会拉取一个pdf的blob流。
第二个是

let viewport = page.getViewport(3);

可以调整canvas的清晰度，如果感觉canvas显示的pdf模糊，可以尝试增大

 page.getViewpor

入参的数值。**

但是这里还是要说一句，pdf虽然正常显示了，但是交互不是太好，因为不支持双手捏合方法缩小，不支持双击放大缩小（当然你也可以直接开启css的touch-action属性）。如果支持，还需要监听双击和双指操作事件