增加了工具栏按钮

src/App.vue

 <template>
   <div id="app">
     <div id="toolbar">
-      <button @click="zoomin">+</button>
+      <span>
+        <button class="toolbarButton zoomin" @click="zoomin"></button>
+        <button class="toolbarButton zoomout" @click="zoomout"></button>
+      </span>
+      <span>
+        <span class="pageNumber currentIndex">1</span>
+        <span class="pageNumber">/ 99</span>
+      </span>
+      <span>
+        <button class="toolbarButton pageUp"></button>
+        <button class="toolbarButton pageDown"></button>
+      </span>
     </div>
     <div id="page">
       <div id="viewerContainer">
@@ -42,11 +53,11 @@ export default {
             const devicePixelRatio = window.devicePixelRatio;
             const scale = this.pageSize * this.scale * devicePixelRatio;
             const viewport = page.getViewport({ scale: scale });
-            let { canvas, textLayerDiv, bodyHeight } = this.initPage(
+            let { bufferCanvas, textLayerDiv, bodyHeight } = this.initPage(
               page,
               viewport
             );
-            this.renderCanvas(canvas, viewport, page);
+            this.renderCanvas(bufferCanvas, viewport, page);
             page.getTextContent().then(res => {
               this.renderHtml(
                 textLayerDiv,
@@ -65,6 +76,11 @@ export default {
       this.pageSize = this.pageSize + 0.05;
       this.preview();
     },
+    zoomout() {
+      $("#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;
@@ -74,28 +90,44 @@ export default {
       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;
+      let bufferCanvas = document.createElement("canvas");
+      bufferCanvas.height = viewport.height;
+      bufferCanvas.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);
+      $(bufferCanvas).css("height", pdfHeight);
+      $(bufferCanvas).css("width", pdfWidth);
       textLayerDiv.css("height", pdfHeight);
       textLayerDiv.css("width", pdfWidth);
-      return { canvas, textLayerDiv: textLayerDiv[0], bodyHeight };
+      return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
     },
-    renderCanvas(canvas, viewport, page) {
-      let context = canvas.getContext("2d");
+    renderCanvas(bufferCanvas, viewport, page) {
+      let bufferContext = bufferCanvas.getContext("2d");
       let renderContext = {
-        canvasContext: context,
+        canvasContext: bufferContext,
         viewport: viewport
       };
-      page.render(renderContext);
-      $(".canvasWrapper").html(canvas);
+      page.render(renderContext).then(() => {
+        let canvas = document.createElement("canvas");
+        let context = canvas.getContext("2d");
+        context.height = bufferCanvas.height;
+        context.width = bufferCanvas.width;
+        context.drawImage(
+          bufferCanvas,
+          0,
+          0,
+          canvas.widgth,
+          canvas.height,
+          0,
+          0,
+          canvas.width,
+          canvas.height
+        );
+        $(".canvasWrapper").html(bufferCanvas);
+      });
     },
     renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) {
       const textLayer = new TextLayerBuilder({
@@ -114,6 +146,7 @@ export default {
 
 <style lang="scss">
 @import "../node_modules/pdfjs-dist/web/pdf_viewer.css";
+$toolbarHeigth: 32px;
 * {
   padding: 0;
   margin: 0;
@@ -123,13 +156,20 @@ body {
   width: 100vw;
   height: 100vh;
 }
+button {
+  border: 0 none;
+  background: none;
+  outline: none;
+  width: 32px;
+  height: 25px;
+}
 #app {
   width: 100%;
   height: 100%;
 }
 #page {
   width: 100%;
-  top: 32px;
+  top: $toolbarHeigth;
   position: relative;
   overflow: auto;
 }
@@ -139,13 +179,73 @@ body {
 }
 #toolbar {
   width: 100vw;
-  height: 32px;
+  height: $toolbarHeigth;
   position: absolute;
   left: 0;
   top: 0;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.8);
   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);
+  span {
+    margin: 0 5px;
+  }
+}
+.toolbarButton {
+  line-height: $toolbarHeigth;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 1px;
+  text-align: center;
+  cursor: pointer;
+  &:hover {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(60, 60, 60, 0.8);
+  }
+}
+.pageNumber {
+  display: inline-block;
+  width: 40px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  vertical-align: middle;
+  top: -3px;
+  position: relative;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+}
+.currentIndex {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.09);
+  padding-right: 10px;
+  text-align: right;
+  margin: 0;
+}
+.toolbarButton::before {
+  position: absolute;
+  left: 0;
+  transform: scale(0.5);
+  display: inline-block;
+}
+.toolbarButton::before {
+  top: -7px;
+}
+.zoomin::before {
+  content: url("./assets/toolbarButton-zoomIn@2x.png");
+}
+.zoomout::before {
+  content: url("./assets/toolbarButton-zoomOut@2x.png");
+}
+.pageUp::before {
+  content: url("./assets/toolbarButton-pageUp@2x.png");
+}
+.pageDown::before {
+  content: url("./assets/toolbarButton-pageDown@2x.png");
 }
 </style>