完成cavas和html渲染

package.json

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

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="toolbar" ref="toolbar">
+      <button @click="zoomin">+</button>
+    </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>
     </div>
-    <router-view />
   </div>
 </template>
 
+<script>
+import pdfJs from "pdfjs-dist/build/pdf";
+import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
+export default {
+  data() {
+    return {
+      pageIndex: 2, // pdf页码
+      scale: 1, // 缩放比例
+      borderSize: 9, // app容器border大小
+      pageSize: 1
+    };
+  },
+  mounted() {
+    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();
+  },
+  methods: {
+    preview() {
+      pdfJs
+        .getDocument(
+          "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"
+          // "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
+        )
+        .then(pdf => {
+          pdf.getPage(this.pageIndex).then(page => {
+            const devicePixelRatio = window.devicePixelRatio;
+            const viewport = page.getViewport({
+              scale: this.pageSize * this.scale * devicePixelRatio
+            });
+            let pers = viewport.width / viewport.height;
+            let canvas = this.$refs.myCanvas;
+            let context = canvas.getContext("2d");
+            let canvasWrapper = this.$refs.canvasWrapper.style;
+            let viewerContainer = this.$refs.viewerContainer.style;
+            let renderContext = {
+              canvasContext: context,
+              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.getTextContent().then(res => {
+              let textLayerDiv = this.$refs.textLayerDiv;
+              textLayerDiv.style.height = this.pageSize * bodyHeight + "px";
+              textLayerDiv.style.width =
+                this.pageSize * pers * bodyHeight + "px";
+              const textLayer = new TextLayerBuilder({
+                textLayerDiv,
+                pageIndex: this.pageIndex,
+                viewport: page.getViewport({
+                  scale:
+                    (this.scale *
+                      this.pageSize *
+                      devicePixelRatio *
+                      (this.pageSize * bodyHeight)) /
+                    viewport.height
+                })
+              });
+              textLayer.setTextContent(res);
+              textLayer.render();
+            });
+          });
+        });
+    },
+    zoomin() {
+      this.$refs.textLayerDiv.innerHTML = "";
+      this.pageSize = this.pageSize + 0.1;
+      this.preview();
+    }
+  }
+};
+</script>
+
 <style lang="scss">
+@import "../node_modules/pdfjs-dist/web/pdf_viewer.css";
+* {
+  padding: 0;
+  margin: 0;
+}
+body {
+  background-color: #3c3c3c;
+  width: 100vw;
+  height: 100vh;
+}
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  width: 100%;
+  height: 100%;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+#page {
+  width: 100%;
+  top: 32px;
+  position: relative;
+  overflow: auto;
+}
+#viewerContainer {
+  margin: auto;
+  position: relative;
+}
+#toolbar {
+  width: 100vw;
+  height: 32px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgba(71, 71, 71, 1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
+    0 1px 1px rgba(0, 0, 0, 0.1);
 }
 </style>