Vue使用pdfjs-dist预览PDF

安装pdfjs-dist

npm install pdf-dist --save //我安装的版本是^2.0.943

引入pdfjs-dist

import * as pdfjsLib from ‘pdfjs-dist/legacy/build/pdf.js’
window.pdfjsWorker=require(‘pdfjs-dist/build/pdf.worker’) // 重点！！！！

代码

html:

      <div ref="pdfContainer">
        <div  v-loading="loading"></div>
      </div>

script

  data() {
    return {
     	loading:true
    	}
   },
    mounted() {
    	this.previewPDF("http://xxxx/test.pdf")
  	},
 	methods: {
 	 async previewPDF(pdfUrl) {
      const container = this.$refs.pdfContainer;
      const loadingTask = pdfjsLib.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      const numPages = pdf.numPages;
      for (let i = 1; i <= numPages; i++) {
        const page = await pdf.getPage(i);
        const canvas = document.createElement('canvas');
        container.appendChild(canvas);
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1 });
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        await page.render(renderContext).promise;
        this.loading = false
      }
    },
  }