整理了代码，使用jquery操作dom

package.json

@@ -9,6 +9,7 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "core-js": "^3.6.5",
     "core-js": "^3.6.5",
+    "jquery": "^3.5.1",
     "pdfjs-dist": "^2.3.200",
     "pdfjs-dist": "^2.3.200",
     "register-service-worker": "^1.7.1",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue": "^2.6.11",

src/App.vue

 <template>
 <template>
   <div id="app">
   <div id="app">
-    <div id="toolbar" ref="toolbar">
+    <div id="toolbar">
       <button @click="zoomin">+</button>
       <button @click="zoomin">+</button>
     </div>
     </div>
-    <div id="page" ref="page">
-      <div id="viewerContainer" ref="viewerContainer">
-        <div class="canvasWrapper" ref="canvasWrapper">
-          <canvas ref="myCanvas"></canvas>
-        </div>
-        <div class="textLayer" ref="textLayerDiv"></div>
+    <div id="page">
+      <div id="viewerContainer">
+        <div class="canvasWrapper"></div>
+        <div id="textLayerDiv" class="textLayer"></div>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -17,87 +15,98 @@
 <script>
 <script>
 import pdfJs from "pdfjs-dist/build/pdf";
 import pdfJs from "pdfjs-dist/build/pdf";
 import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
 import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
+import $ from "jquery";
 export default {
 export default {
   data() {
   data() {
     return {
     return {
       pageIndex: 2, // pdf页码
       pageIndex: 2, // pdf页码
-      scale: 1, // 缩放比例
-      borderSize: 9, // app容器border大小
+      scale: 2, // 缩放比例
+      borderSize: 9, // viewerContainer容器border大小
       pageSize: 1
       pageSize: 1
     };
     };
   },
   },
   mounted() {
   mounted() {
     pdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker");
     pdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker");
-    this.$refs.page.style.height =
-      document.getElementsByTagName("body")[0].clientHeight -
-      this.$refs.toolbar.clientHeight +
-      "px";
     this.preview();
     this.preview();
   },
   },
   methods: {
   methods: {
     preview() {
     preview() {
       pdfJs
       pdfJs
         .getDocument(
         .getDocument(
-          "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/compressed.tracemonkey-pldi-09.pdf"
+          // "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/compressed.tracemonkey-pldi-09.pdf"
           // "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/product/20200415/0e8d1766-6b2a-4e1c-bd8e-be53c1f2cf4c/out.pdf"
           // "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/product/20200415/0e8d1766-6b2a-4e1c-bd8e-be53c1f2cf4c/out.pdf"
-          // "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
+          "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
         )
         )
         .then(pdf => {
         .then(pdf => {
           pdf.getPage(this.pageIndex).then(page => {
           pdf.getPage(this.pageIndex).then(page => {
             const devicePixelRatio = window.devicePixelRatio;
             const devicePixelRatio = window.devicePixelRatio;
-            const viewport = page.getViewport({
-              scale: this.pageSize * this.scale * devicePixelRatio
+            const scale = this.pageSize * this.scale * devicePixelRatio;
+            const viewport = page.getViewport({ scale: scale });
+            let { canvas, textLayerDiv, bodyHeight } = this.initPage(
+              page,
+              viewport
+            );
+            this.renderCanvas(canvas, viewport, page);
+            page.getTextContent().then(res => {
+              this.renderHtml(
+                textLayerDiv,
+                page,
+                scale,
+                viewport,
+                bodyHeight,
+                res
+              );
             });
             });
+          });
+        });
+    },
+    zoomin() {
+      $("#textLayerDiv").html("");
+      this.pageSize = this.pageSize + 0.05;
+      this.preview();
+    },
+    initPage(page, viewport) {
+      $("#page").css("height", $("body").height() - $("#toolbar").height());
       let pers = viewport.width / viewport.height;
       let pers = viewport.width / viewport.height;
-            let canvas = this.$refs.myCanvas;
+      let canvasWrapper = $(".canvasWrapper");
+      let viewerContainer = $("#viewerContainer");
+      let textLayerDiv = $("#textLayerDiv");
+      let bodyHeight = $("#page").height() - this.borderSize * 2;
+      let pdfHeight = this.pageSize * bodyHeight;
+      let pdfWidth = this.pageSize * pers * bodyHeight;
+      let canvas = document.createElement("canvas");
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      viewerContainer.css("border", this.borderSize + "px solid transparent");
+      viewerContainer.css("height", pdfHeight);
+      viewerContainer.css("width", pdfWidth);
+      canvasWrapper.css("height", pdfHeight);
+      canvasWrapper.css("width", pdfWidth);
+      $(canvas).css("height", pdfHeight);
+      $(canvas).css("width", pdfWidth);
+      textLayerDiv.css("height", pdfHeight);
+      textLayerDiv.css("width", pdfWidth);
+      return { canvas, textLayerDiv: textLayerDiv[0], bodyHeight };
+    },
+    renderCanvas(canvas, viewport, page) {
       let context = canvas.getContext("2d");
       let context = canvas.getContext("2d");
-            let canvasWrapper = this.$refs.canvasWrapper.style;
-            let viewerContainer = this.$refs.viewerContainer.style;
       let renderContext = {
       let renderContext = {
         canvasContext: context,
         canvasContext: context,
         viewport: viewport
         viewport: viewport
       };
       };
-            viewerContainer.cssText =
-              "border: " + this.borderSize + "px solid transparent";
-            let bodyHeight =
-              document.getElementById("page").clientHeight -
-              this.borderSize * 2;
-            canvas.height = viewport.height;
-            canvas.width = viewport.width;
-            viewerContainer.height = this.pageSize * bodyHeight + "px";
-            viewerContainer.width = this.pageSize * pers * bodyHeight + "px";
-            canvasWrapper.height = this.pageSize * bodyHeight + "px";
-            canvasWrapper.width = this.pageSize * pers * bodyHeight + "px";
-            canvas.style.height = this.pageSize * bodyHeight + "px";
-            canvas.style.width = this.pageSize * pers * bodyHeight + "px";
       page.render(renderContext);
       page.render(renderContext);
-            page.getTextContent().then(res => {
-              let textLayerDiv = this.$refs.textLayerDiv;
-              textLayerDiv.style.height = this.pageSize * bodyHeight + "px";
-              textLayerDiv.style.width =
-                this.pageSize * pers * bodyHeight + "px";
+      $(".canvasWrapper").html(canvas);
+    },
+    renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) {
       const textLayer = new TextLayerBuilder({
       const textLayer = new TextLayerBuilder({
-                textLayerDiv,
+        textLayerDiv: textLayerDiv,
         pageIndex: this.pageIndex,
         pageIndex: this.pageIndex,
         viewport: page.getViewport({
         viewport: page.getViewport({
-                  scale:
-                    (this.scale *
-                      this.pageSize *
-                      devicePixelRatio *
-                      (this.pageSize * bodyHeight)) /
-                    viewport.height
+          scale: (scale * (this.pageSize * bodyHeight)) / viewport.height
         })
         })
       });
       });
       textLayer.setTextContent(res);
       textLayer.setTextContent(res);
       textLayer.render();
       textLayer.render();
-            });
-          });
-        });
-    },
-    zoomin() {
-      this.$refs.textLayerDiv.innerHTML = "";
-      this.pageSize = this.pageSize + 0.1;
-      this.preview();
     }
     }
   }
   }
 };
 };