之前写过一篇查看pdf的文章，当时的需求还没变，服务器还可以外网访问，这没过几天又说服务器只能内网访问，所以之前那种方法行不通了
现在的思路是后端把pdf转成base64传到前端，前端再解析成pdf
首先要装一个依赖
npm i pdfjs-dist
下面是预览pdf的整个页面代码
1 <template> 2 <div class="previewPdf"> 3 <div class="pdf-box"> 4 <div class="pdfList"></div> 5 </div> 6 </div> 7 </template> 8 9 <script> 10 import PDFJS from ‘pdfjs-dist‘ 11 12 export default { 13 name: "previewPdf", 14 data(){ 15 return { 16 // pdfSrc: ‘‘, 17 } 18 }, 19 // 请求接口，拿到base64格式的pdf 20 created() { 21 // pdfNo是从上一页传过来的请求时的参数 22 let pdfNo = this.$route.query.pdfNo 23 this.$axios({ 24 method:‘post‘, url:‘‘, 25 data:{pdfNo: pdfNo} 26 }).then((res)=>{ 27 let pdfDataList = res.data.result.base64 28 this.showPdf(pdfDataList) 29 }) 30 }, 31 methods: { 32 // 处理方法 33 async showPdf(base64) { 34 let pdfList = document.querySelector(‘.pdfList‘) //通过querySelector选择DOM节点,使用document.getElementById()也一样 35 let decodedBase64 = atob(base64) //使用浏览器自带的方法解码 36 let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象 37 let pages = pdf.numPages //声明一个pages变量等于当前pdf文件的页数 38 console.log(‘页数：‘, pages) 39 for (let i = 1; i <= pages; i++) { //循环页数 40 let canvas = document.createElement(‘canvas‘) 41 let page = await pdf.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象 42 let scale = 1; //缩放倍数，1表示原始大小 43 let viewport = page.getViewport(scale); 44 let context = canvas.getContext(‘2d‘); //创建绘制canvas的对象 45 canvas.height = viewport.height; //定义canvas高和宽 46 canvas.width = viewport.width; 47 let renderContext = { 48 canvasContext: context, 49 viewport: viewport 50 }; 51 await page.render(renderContext) 52 canvas.className = ‘canvas‘ //给canvas节点定义一个class名,这里我取名为canvas 53 pdfList.appendChild(canvas) //插入到pdfList节点的最后 54 } 55 } 56 57 } 58 } 59 </script> 60 61 <style scoped> 62 .previewPdf, .pdf-box{ 63 width: 100%; 64 height: 100%; 65 } 66 .pdf-box{ 67 padding-top: 3.75rem; 68 } 69 </style>
当时找了好多方法，试来试去就这个成功了，参考的是这篇文章https://www.jianshu.com/p/b55b032e712c 讲的很详细
接下来说分享，分享功能是要调原生的，我们项目中原生的方法是这样的
1 sharePdfLink () { 2 try { 3 // 分享出去的是一个链接，打开连接就相当于通过前端路由到previewPdf页面，同事发送一个请求，具体操作在previewPdf中实现，就是上边那个页面 4 // fontEndUrl 是前端服务地址，例如本地：http://192.168.10.20:8085 pdfNo是参数，这就相当于一个get请求，?后是参数 5 var params = { webPageUrl: fontEndUrl + ‘/previewPdf?pdfNo=‘+ pdfNo }; 6 // eslint-disable-next-line no-undef,no-unused-vars 7 cordova.plugin.DeviceInfo.share( 8 params, 9 function succ(data) { 10 console.log(‘Success‘, data); 11 }, 12 function fail(data) { 13 console.log(‘Fail‘, data.errMsg); 14 } 15 ); 16 } catch (e) { 17 console.log(‘错误‘, e); 18 } 19 },