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

之前写过一篇查看pdf的文章，当时的需求还没变，服务器还可以外网访问，这没过几天又说服务器只能内网访问，所以之前那种方法行不通了

现在的思路是后端把pdf转成base64传到前端，前端再解析成pdf

首先要装一个依赖

npm i pdfjs-dist

下面是预览pdf的整个页面代码

<template>
  <div class="previewPdf">
    <div class="pdf-box">
      <div class="pdfList"></div>
    </div>
  </div>
</template>

<script>
  import PDFJS from 'pdfjs-dist'
  
  export default {
    name: "previewPdf",
    data(){
      return {
        // pdfSrc: '',
      }
    },
    // 请求接口，拿到base64格式的pdf
    created() {
      // pdfNo是从上一页传过来的请求时的参数
      let pdfNo = this.$route.query.pdfNo
      this.$axios({
        method:'post', url:'',
        data:{pdfNo: pdfNo}
      }).then((res)=>{
        let pdfDataList = res.data.result.base64
        this.showPdf(pdfDataList)
      })
    },
    methods: {
      // 处理方法
      async showPdf(base64) {
        let pdfList = document.querySelector('.pdfList') //通过querySelector选择DOM节点,使用document.getElementById()也一样
        let decodedBase64 = atob(base64) //使用浏览器自带的方法解码
        let pdf = await  PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象
        let pages = pdf.numPages //声明一个pages变量等于当前pdf文件的页数
        console.log('页数：', pages)
        for (let i = 1; i <= pages; i++) { //循环页数
          let canvas = document.createElement('canvas')
          let page = await pdf.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象
          let scale = 1; //缩放倍数，1表示原始大小
          let viewport = page.getViewport(scale);
          let context = canvas.getContext('2d'); //创建绘制canvas的对象
          canvas.height = viewport.height; //定义canvas高和宽
          canvas.width = viewport.width;
          let renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          await page.render(renderContext)
          canvas.className = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas
          pdfList.appendChild(canvas) //插入到pdfList节点的最后
        }
      }
      
    }
  }
</script>

<style scoped>
  .previewPdf, .pdf-box{
    width: 100%;
    height: 100%;
  }
  .pdf-box{
    padding-top: 3.75rem;
  }
</style>

 

当时找了好多方法，试来试去就这个成功了，参考的是这篇文章https://www.jianshu.com/p/b55b032e712c 讲的很详细

接下来说分享，分享功能是要调原生的，我们项目中原生的方法是这样的

sharePdfLink () {
  try {
    // 分享出去的是一个链接，打开连接就相当于通过前端路由到previewPdf页面，同事发送一个请求，具体操作在previewPdf中实现，就是上边那个页面
    // fontEndUrl 是前端服务地址，例如本地：http://192.168.10.20:8085  pdfNo是参数，这就相当于一个get请求，?后是参数
    var params = { webPageUrl: fontEndUrl + '/previewPdf?pdfNo='+ pdfNo };
    // eslint-disable-next-line no-undef,no-unused-vars
    cordova.plugin.DeviceInfo.share(
      params,
      function succ(data) {
        console.log('Success', data);
      },
      function fail(data) {
        console.log('Fail', data.errMsg);
      }
    );
  } catch (e) {
    console.log('错误', e);
  }
},