pdf预览功能修改4

src/views/pdf/preview.vue

@@ -18,13 +18,7 @@
       </div>
     </div>
   </div>
-  <div>
-    <canvas
-      class="pdf-canvas"
-      v-for="(item, index) in pdfPagesNum"
-      :key="index"
-      :ref="'pdf-canvas-' + (index+1)"
-    ></canvas>
+  <div id="pdf-canvas">
   </div>
 </template>
 <script lang="ts">
@@ -46,6 +40,7 @@ export default defineComponent({
   methods: {
     getPdf(url: string) {
       let that = this;
+      document.getElementById('pdf-canvas').innerHTML=""
       PDFJS.getDocument(url).promise.then((pdfDoc) => {
         this.pdfPagesNum = pdfDoc.numPages; // pdf的总页数
         //获取第pageNum页的数据
@@ -58,8 +53,8 @@ export default defineComponent({
       pdfDoc.getPage(pageNum).then((page) => {
         // 设置canvas相关的属性
         // console.log(canvasDomArr.value)
-        const canvas:HTMLCanvasElement = this.$refs['pdf-canvas-'+pageNum] as HTMLCanvasElement
-        console.log(canvas)
+        const canvas:HTMLCanvasElement =  document.createElement('canvas')
+        canvas.classList.add('pdf-canvas');
         const ctx = canvas.getContext('2d');
         const dpr = window.devicePixelRatio || 1;
         const bsr =
@@ -82,6 +77,8 @@ export default defineComponent({
         };
         // 数据渲染到canvas画布上
         page.render(context);
+        //插入canvas
+        document.getElementById('pdf-canvas')?.appendChild(canvas)
       });
     },
   },
@@ -162,7 +159,7 @@ export default defineComponent({
 //   getPdf('./web/科目一标识.pdf', 1);
 // });
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .head {
   width: 100%;
   height: 118px;