vue项目移动端查看分享pdf（服务器只能内网访问）

Posted 2020-11-27 苦瓜汁儿加糖

之前写过一篇查看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 },