pdf.js使用詳解

項目中需要用到PDF的在線預覽技術，自己百度摸索了很久終於搞出來了。記錄一下

1、首先肯定是  npm i pdfjs-dist 下來，然后全局或者局部引入

 

注意 ：這里就是重點了，必須對請求的請求頭加上這么一句    

responseType: 'arraybuffer'   這很關鍵，會讓后端返回的數據默認為buffer數組，然后就可以用pdf.js官方文檔上的方法進行canvas渲染了，下面上代碼

 

 

請求的配置

return http({

method: 'GET',

url: url,

responseType: 'arraybuffer'

})

 

具體操作代碼    （着色部分為獲取到正確的buffer數組后傳入該方法即可在頁面上渲染PDF）

<template>
  <div id="docdetailword">    
     <div  id="canvasBox">
         <p v-if="shownodata">暫無數據</p>
         </div>    
  </div>
</template>

<script>
import api from "@/assets/api"
import mdContract from '@/components/contract.md.vue'
import PDFJS from "pdfjs-dist";
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';
export default { 
  name: 'docdetailword',
  data () {
    return {
           shownodata : false
          }
  },
  created () {   
    this.checkSuccess();   //獲取文書PDF 
  },
  methods:{  
      checkSuccess() {
          api.getdocpdf(`/umale-cases-web/docs/pdf/case/${this.$store.docbasedetail.case_num}/doc/${this.$store.docbasedetail.id}`)//  /umale-cases-web/docs/pdf/case/7d946bbe729c47d399c2a0537d1a4bc1/doc/1986
          .then( res => { 
              if(res.data.byteLength === 0) {
                  this.shownodata = true
              }else{
                 this.pdfToCanvas(res.data);
              }       
                   
          })
         
      },
      /**
     * 將 pdf 繪制到 canvas
     */
    pdfToCanvas(pdfArrayBuffer) {
      return new Promise(async (resolve, reject) => {
        const pdfData = await PDFJS.getDocument(pdfArrayBuffer);
        const fragment = document.createDocumentFragment();
        const canvasBox = document.querySelector("#canvasBox");
        const numPages = pdfData.numPages;

        for (let i = 1; i <= numPages; i++) {
          let canvas = document.createElement("canvas");
          let scale = 1;
          let page = await pdfData.getPage(i);
          let viewport = page.getViewport(scale); // reference canvas via context

          canvas.id = "pageNum" + i;
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          canvas.style.width = "100%";
          canvas.style.height = "100%";

          let renderContext = {
            canvasContext: canvas.getContext("2d"),
            viewport: viewport
          };
          page.render(renderContext);

          fragment.appendChild(canvas);
        }
        canvasBox.appendChild(fragment);
        setTimeout(() => {
          resolve(); //防止 canvas 沒有繪制完
        }, 5000);
      });
    },
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="less">
 #canvasBox{
     width: 100%;
     height: 100%;
     text-align: center;
     p{
         margin-top: 200px;
         color: #ACACAC;
     }
 }
</style>