h5 pdf预览

h5 pdf预览

Packjson: 使用cnpm 下载pdfjs-dist
"pdfjs-dist": "^2.4.456",

html:
  <div v-if="PDF_IMG_List.length>0">
              <img
                style="width:100%;height:100%;"
                v-for="(item,index) in PDF_IMG_List"
                :key="index"
                :src="item"
              />
      </div>

js部分：
import PDFJS from "pdfjs-dist";
PDFJS.GlobalWorkerOptions.workerSrc =
  "https://cdn.bootcdn.net/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js";
data:{
Return{
	PDF_IMG_List: [],
	PDF_Obj: null,
	PDFTotalPage:0
 	}
 }

   PDFJS.getDocument(url).promise.then(async res => {
   //url'为pdf地址
        this.PDF_Obj = res; //pdf下载成功
        this.PDFTotalPage = res.numPages; //总页数
        for (let i = 1; i <= this.PDFTotalPage; i++) {
          const page = await res.getPage(i);
          let viewport = page.getViewport({ scale: 1 });
          this.$refs.cvs.width = viewport.width;
          this.$refs.cvs.height = viewport.height;
          await page.render({
            canvasContext: this.$refs.cvs.getContext("2d"),
            viewport
          }).promise;
          this.PDF_IMG_List.push(this.$refs.cvs.toDataURL("image/png", 1));
         
        }
      });