vue 中展示PDF内容

vue 中展示PDF内容

不久前有个需要改的需求，以前是直接根据链接让用户下载对应pdf文件来查看，最主要是给用户查看，然而这种并不是很安全的，其他用户可以进行下载或者使用pdf链接分享给其他人，所以后来需要验证后再进行展示pdf内容，只有对应知道的人自己验证后才能打开;

这里说下自己的实现吧，读取pdf，那么在纯静态的使用vue-cli搭建的网站中读取pdf文件是不行的，何况涉及到验证，那么只有调用接口来处理，但是读取pdf文件展示就需要组件，找了pdf.js 来使用，根据官方文档，pdf文件不能够使用其他网站的，也就是不能跨域，不过幸好可以加载文件流进去，至此 验证=>获取文件流数据=>渲染 完成，下方给的是处理代码

loadFile(data) {
    let _this = this;
    let transData = window.atob(data);
    PDFJS.getDocument({ data: transData }).then(pdf => {
        _this.pdfDoc = pdf;
        _this.pages = _this.pdfDoc.numPages;
        _this.$nextTick(() => {
            _this.renderPage(1);
        });
    });
}

renderPage(num) {
   let _this = this;
   this.pdfDoc.getPage(num).then(page => {
       let canvas = document.getElementById("the-canvas" + num);
       let ctx = canvas.getContext("2d");
       let dpr = window.devicePixelRatio || 1;
       let bsr =
           ctx.webkitBackingStorePixelRatio ||
           ctx.mozBackingStorePixelRatio ||
           ctx.msBackingStorePixelRatio ||
           ctx.oBackingStorePixelRatio ||
           ctx.backingStorePixelRatio ||
           1;
       let ratio = dpr / bsr;
       let viewport = page.getViewport(
           screen.availWidth / page.getViewport(1).width
       );
       canvas.width = viewport.width * ratio;
       canvas.height = viewport.height * ratio;
       canvas.style.width = viewport.width + "px";
       canvas.style.height = viewport.height + "px";
       ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
       ctx.fillStyle = "#fff";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       let renderContext = {
           canvasContext: ctx,
           viewport: viewport
       };
       page.render(renderContext).promise.then(()=>{
           //这一段处理涉及到展示处理
           _this.transImg(
               canvas,
               canvas.style.width,
               canvas.style.height,
               num
           );
       });
       if (_this.pages > num) {
           _this.renderPage(num + 1);
       }
   });
}

//这一段处理涉及到展示处理
transImg(canvas, w, h, num) {
    var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
    image.className = "trans-img";
    image.setAttribute("preview", 1);
    $("#pdf-img").append(image);
    let _self = this;
    if (this.pages <= num) {
        setTimeout(() => {
            _self.loadingConfig.isShow = false;
            _self.$previewRefresh();
        }, 500);
    }
}

用到的 window.atob()

关于这一段处理涉及到展示的注释，因为用户要查看以canvas承载的pdf文字，但是查看体验并不是很好，文字很小，也不能放大，那么就需要处理这块问题，找了几个插件，试了vue-photo-preview 这个组件满足条件，不过由于它是使用的img，所以我上边处理给成了img并隐藏对应canvas展示，根据vue-photo-preview 所定的规范来处理，效果还是不错的，不过pdf.js这个组件比较大，我采用了cdn引用了js，以下是剩余部分：

<template>
  <div class="pdf-body">
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page" style="display:none;"></canvas>
    <div id="pdf-img"></div>
    <loading :show="loadingConfig.isShow" :text="loadingConfig.text"></loading>
  </div>
</template>

至此，优化差不多了

补充一下，在canvas写入时有问题，那么需要改一下顺序了

page.render(renderContext).promise.then(()=>{
           //这一段处理涉及到展示处理
           _this.transImg(
               canvas,
               canvas.style.width,
               canvas.style.height,
               num
           );
});
 if (_this.pages > num) {
     _this.renderPage(num + 1);
}
//上方这一段需要替换成下方这一段，添加一个data:canvasList
        page.render(renderContext).promise.then(() => {
          _this.canvasList.push({
            index: num,
            canvasData: canvas
          });
          if (_this.pages > num) {
            _this.renderPage(num + 1);
          } else {
            _this.canvasList = _this.canvasList.sort((a, b) => {
              return a.index - b.index;
            })
            _this.canvasList.forEach(item => {
              _this.transImg(item.canvasData,canvasData.style.width, canvasData.style.height, item.index);
            });
          }
        });