增加了缩放的边界

src/App.vue

@@ -58,7 +58,7 @@
                 title="Zoom Out"
                 tabindex="21"
                 data-l10n-id="zoom_out"
-                @click="zoomOut"
+                @click="zoomOut(null)"
               >
                 <span data-l10n-id="zoom_out_label">放大</span>
               </button>
@@ -69,7 +69,7 @@
                 title="Zoom In"
                 tabindex="22"
                 data-l10n-id="zoom_in"
-                @click="zoomIn"
+                @click="zoomIn(null)"
               >
                 <span data-l10n-id="zoom_in_label">缩小</span>
               </button>
@@ -84,97 +84,73 @@
                 @change="changeSelected(selected)"
               >
                 <option
-                  id="pageAutoOption"
-                  title=""
-                  value="auto"
-                  selected="selected"
-                  data-l10n-id="page_scale_auto"
-                  >自动缩放</option
+                  v-for="(item, index) in zoomList"
+                  :key="index"
+                  :value="index"
+                  :disabled="Object.keys(item)[0] === 'custom' ? true : false"
+                  :hidden="Object.keys(item)[0] === 'custom' ? true : false"
+                  >{{ item[Object.keys(item)[0]].page_scale_percent }}</option
                 >
-                <option
-                  id="pageActualOption"
-                  title=""
-                  value="page-actual"
-                  data-l10n-id="page_scale_actual"
-                  >实际大小</option
-                >
-                <option
+                <!-- <option
                   id="pageFitOption"
-                  title=""
                   value="page-fit"
                   data-l10n-id="page_scale_fit"
                   >适合页面</option
                 >
                 <option
-                  id="pageWidthOption"
-                  title=""
-                  value="page-width"
-                  data-l10n-id="page_scale_width"
-                  >适合页宽</option
-                >
-                <option
                   id="customScaleOption"
-                  title=""
                   value="custom"
                   disabled="disabled"
                   hidden="true"
                 ></option>
                 <option
-                  title=""
                   value="0.5"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 50 }'
                   >50%</option
                 >
                 <option
-                  title=""
                   value="0.75"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 75 }'
                   >75%</option
                 >
                 <option
-                  title=""
                   value="1"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 100 }'
                   >100%</option
                 >
                 <option
-                  title=""
                   value="1.25"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 125 }'
                   >125%</option
                 >
                 <option
-                  title=""
                   value="1.5"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 150 }'
                   >150%</option
                 >
                 <option
-                  title=""
                   value="2"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 200 }'
                   >200%</option
                 >
                 <option
-                  title=""
                   value="3"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 300 }'
                   >300%</option
                 >
                 <option
-                  title=""
                   value="4"
                   data-l10n-id="page_scale_percent"
                   data-l10n-args='{ "scale": 400 }'
                   >400%</option
-                >
+                > -->
               </select>
             </span>
           </div>
@@ -202,8 +178,20 @@ export default {
       scale: 2, // 缩放比例
       borderSize: 9, // viewerContainer容器border大小
       pageSize: 1,
-      selected: "0.5",
-      pdf: null
+      selected: 2,
+      pdf: null,
+      zoomList: [
+        { "0.5": { page_scale_percent: "50%", value: 0.5 } },
+        { "0.75": { page_scale_percent: "75%", value: 0.75 } },
+        { "1": { page_scale_percent: "100%", value: 1 } },
+        { "1.25": { page_scale_percent: "125%", value: 1.25 } },
+        { "1.5": { page_scale_percent: "150%", value: 1.5 } },
+        { "1.75": { page_scale_percent: "175%", value: 1.75 } },
+        { "2": { page_scale_percent: "200%", value: 2 } },
+        { "3": { page_scale_percent: "300%", value: 3 } },
+        { "4": { page_scale_percent: "400%", value: 4 } },
+        { custom: { page_scale_percent: "", value: 1 } }
+      ]
     };
   },
   mounted() {
@@ -230,9 +218,6 @@ export default {
       );
       this.renderCanvas(bufferCanvas, viewport, page);
       let textContent = await page.getTextContent();
-      // page.getTextContent().then(res => {
-      //   this.renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res);
-      // });
       this.renderHtml(
         textLayerDiv,
         page,
@@ -265,32 +250,31 @@ export default {
       textLayerDiv.css("width", pdfWidth);
       return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
     },
-    renderCanvas(bufferCanvas, viewport, page) {
+    async renderCanvas(bufferCanvas, viewport, page) {
       let bufferContext = bufferCanvas.getContext("2d");
       let renderContext = {
         canvasContext: bufferContext,
         viewport: viewport
       };
-      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);
-      });
+      await page.render(renderContext);
+      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) {
+    renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, textContent) {
       $("#textLayerDiv").html("");
       const textLayer = new TextLayerBuilder({
         textLayerDiv: textLayerDiv,
@@ -299,19 +283,29 @@ export default {
           scale: (scale * (this.pageSize * bodyHeight)) / viewport.height
         })
       });
-      textLayer.setTextContent(res);
+      textLayer.setTextContent(textContent);
       textLayer.render();
     },
     zoomIn(pageSize) {
+      console.log("pageSize:", pageSize);
+      let currentSize = pageSize ? pageSize : this.pageSize + 0.05
+      if (currentSize > 4) {
+        return;
+      }
       this.pageSize = pageSize ? pageSize : this.pageSize + 0.05;
       this.preview();
     },
     zoomOut(pageSize) {
+      console.log("pageSize:", pageSize);
+      let currentSize = pageSize ? pageSize : this.pageSize - 0.05
+      if (currentSize < 0.5) {
+        return;
+      }
       this.pageSize = pageSize ? pageSize : this.pageSize - 0.05;
       this.preview();
     },
     previous() {
-      if (this.pageIndex === 1){
+      if (this.pageIndex === 1) {
         return;
       }
       this.pageIndex = this.pageIndex - 1;
@@ -324,7 +318,10 @@ export default {
       this.pageIndex = this.pageIndex + 1;
       this.preview();
     },
-    changeSelected(value) {
+    changeSelected(index) {
+      let item = this.zoomList[index];
+      let value = item[Object.keys(item)[0]].value;
+      console.log(item)
       if (value > this.pageSize) {
         this.zoomOut(value);
       } else if (value < this.pageSize) {