hotfix[20230816]pdf文件 用pdf.js解析并渲染

src/views/ebiz/sale/InsuranceTip - 副本.vue

@@ -0,0 +1,140 @@
+<template>
+  <div style="width: 100%;margin: auto;display: flex;flex-direction: column;align-items: center;">
+    <div style="display: none;">
+      <canvas v-for="item in totalPage" :key="item" :id='"the-canvas" + item' class="pdf-content"></canvas>
+    </div>
+    <img @click="isPrevShowFunc(item)" v-for="item in imgArrayNew" :src="item.url" style="width: 100vw;"/>
+    <van-image-preview id="preview" v-model="isPrevShow" :images="images"/>
+  </div>
+</template>
+
+<script>
+  import { ImagePreview } from 'vant'
+  import * as  pdfjsLib from 'pdfjs-dist'
+  import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
+  import Vue from 'vue'
+
+  Vue.use(ImagePreview)
+  export default {
+    data() {
+      return {
+        totalPage: [],
+        isPrevShow:false,
+        images: [],
+        imgArray:[],
+        imgArrayNew: []
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.pdfToimg()
+    },
+    methods:{
+      isPrevShowFunc(data){
+        this.isPrevShow = true
+        this.images = [data.url]
+      },
+      pdfToimg(){
+        let that = this
+        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+        let pdfUrl = 'https://iagentsales-test2.e-guofu.com/opt/ebiz/webapps/ebiz-epolicy/pdf/2023/08/09/1000001078372351/1000001078372351.pdf';
+        let loadingTask = pdfjsLib.getDocument(pdfUrl);
+        loadingTask.promise.then((pdf) => {
+          let pageNum = pdf.numPages
+          this.totalPage = pageNum;
+          for (let i = 1; i <= pageNum; i++) {
+            pdf.getPage(i).then((page) => {
+              const canvas = document.getElementById('the-canvas' + i);
+              const ctx = canvas.getContext('2d')
+              const viewport = page.getViewport({ scale: 4 })
+              canvas.height = viewport.height;
+              canvas.width = viewport.width;
+              const destWidth = document.body.clientWidth;
+              canvas.style.width = destWidth + 'px';
+              canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
+              page.render({
+                canvasContext: ctx,
+                viewport,
+              }).promise.then(function() {
+                // 将画布上的内容转换为图像
+                var imageData = canvas.toDataURL('image/png');
+                that.imgArray.push({
+                  index:i,
+                  url:imageData
+                })
+                // 这里可以将图像存储到服务器或本地计算机上
+              });
+            })
+          }
+        }, function (reason) {
+          console.error(reason)
+        })
+      }
+    },
+    watch:{
+      imgArray(val){
+        let aaa = JSON.parse(JSON.stringify(val))
+        let asd = aaa.sort(function(a, b){return a.index - b.index});
+        this.imgArrayNew = asd
+        console.log(asd)
+      }
+    },
+  }
+</script>
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+
+
+<!--<template>-->
+<!--  <div id="pdf">-->
+<!--    <div id="demo"></div>-->
+<!--  </div>-->
+<!--</template>-->
+<!--<script>-->
+
+<!--  import Pdfh5 from "pdfh5";-->
+
+<!--  export default {-->
+<!--    name: 'pdf',-->
+<!--    data() {-->
+<!--      return {-->
+<!--        pdfh5:  null-->
+<!--      };-->
+<!--    },-->
+
+<!--    mounted() {-->
+<!--      //实例化-->
+<!--      this.pdfh5 = new Pdfh5("#demo", {-->
+<!--        pdfurl:  'https://iagentsales-test2.e-guofu.com/opt/ebiz/webapps/ebiz-epolicy/pdf/2023/08/09/1000001078372351/1000001078372351.pdf',-->
+<!--        lazy:true,-->
+<!--        scale:1-->
+<!--      }).on("complete", function (status, msg, time) { //监听完成事件-->
+<!--        console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)-->
+<!--      })-->
+<!--    }-->
+<!--  }-->
+<!--</script>-->
+
+<!--<style lang="scss" scoped>-->
+<!--  #demo{-->
+<!--    width: 100vw;-->
+<!--  }-->
+<!--  /deep/.viewerContainer{-->
+<!--    width: 100vw;-->
+<!--    overflow: inherit;-->
+<!--  }-->
+<!--  /deep/ .pageNum{-->
+<!--    display: none!important;-->
+<!--  }-->
+<!--  /deep/ .pageContainer{-->
+<!--    img{-->
+<!--      width: 100vw;-->
+<!--    }-->
+<!--  }-->
+<!--</style>-->