feat: 处理需求电子说明书后台调整

package-lock.json

@@ -35,6 +35,7 @@
         "core-js": "^3.6.5",
         "flyio": "^0.6.2",
         "js-base64": "^3.7.5",
+        "pdfjs-dist": "^4.10.38",
         "regenerator-runtime": "^0.12.1",
         "vconsole": "^3.15.1",
         "vue": "^2.6.11",
@@ -3962,6 +3963,177 @@
         "node": ">=4"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.66.tgz",
+      "integrity": "sha512-NE/eQKLbUS+LCbMHRa5HnR7cc1Q4ibg/qfLUN4Ukl3CC0lq6LfHE0YbvFm/l4i5RyyS+aUjL+8IuZDD9EH3amg==",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.66",
+        "@napi-rs/canvas-darwin-arm64": "0.1.66",
+        "@napi-rs/canvas-darwin-x64": "0.1.66",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.66",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.66",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.66",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.66"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.66.tgz",
+      "integrity": "sha512-77Yq9yaUYN90zCovYOpw7LhidJiswU9wLIWWBGF6iiEJyQdt6tkiXpGRZpOMJVO70afkcdc4T7532cxMIBhk0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.66.tgz",
+      "integrity": "sha512-cz3aJ06b8BZGtwRxKTiE0OVUlB17MH8j+BnE4A5+wD9aD1guCCqECsz+k7tpXdAdTAYKRIz2pq6ZuiJ76NyUbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.66.tgz",
+      "integrity": "sha512-szIWqJgFm2OTyGzM+hSiJOaOtjI73VYRC2KN30zZTt7i1+0sgpm5exK5ltDBPOmCdnLt7SbUfpInLj8VvxYlKA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.66.tgz",
+      "integrity": "sha512-h/TZJFc6JLvp8FwbA5mu+yXiblN0iKqshU7xzd6L+ks5uNYgjS7XWLkNiyPQkMaXQgVczOJfZy7r4NSPK3V8Hg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.66.tgz",
+      "integrity": "sha512-RGFUdBdi0Xmf+TfwZcB89Ap6hDYh4nzyJhXhNJIgve6ELrIPFhf7sDHvUHxjgW0YzczGoo+ophyCm03cJggu+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.66.tgz",
+      "integrity": "sha512-2cFViDIZ0xQlAHyJmyym+rj3p04V16vgAiz64sCAfwOOiW6e19agv1HQWHUsro3G2lF3PaHGAnp0WRPXGqLOfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.66.tgz",
+      "integrity": "sha512-Vm5ZWS2RDPeBpnfx83eJpZfJT07xl0jqp8d83PklKqiDNa3BmDZZ/uuI40/ICgejGLymXXYo5N21b7oAxhRTSA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.66.tgz",
+      "integrity": "sha512-/ptGBhErNBCgWff3khtuEjhiiYWf70oWvBPRj8y5EMB0nLYpve7RxxFnavVvxN49kJ0MQHRIwgfyd47RSOOKPw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.66.tgz",
+      "integrity": "sha512-XunvXisTkIG+bpq6BcXmsUstoLX3RLS6N9Uz9Pg9RpWIMeM6ObR5shr3NgpGRJq93769I1hS4mJW0DX2Au3WBw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.66.tgz",
+      "integrity": "sha512-3n34watNFqpwACDA+pt4jfQD6zR8PzfK86FBajdsgDVVZhSp6ohgbbJv+eUrXM08VUtjxTq7+U4sWspTu9+4Ug==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@node-ipc/js-queue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -16047,9 +16219,15 @@
       }
     },
     "node_modules/pdfjs-dist": {
-      "version": "2.6.347",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
-      "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+      "version": "4.10.38",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
+      "integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.65"
+      }
     },
     "node_modules/pend": {
       "version": "1.2.0",
@@ -20672,6 +20850,11 @@
         "worker-loader": "^2.0.0"
       }
     },
+    "node_modules/vue-pdf/node_modules/pdfjs-dist": {
+      "version": "2.6.347",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
+      "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+    },
     "node_modules/vue-resize-sensor": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz",
@@ -24844,6 +25027,84 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@napi-rs/canvas": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.66.tgz",
+      "integrity": "sha512-NE/eQKLbUS+LCbMHRa5HnR7cc1Q4ibg/qfLUN4Ukl3CC0lq6LfHE0YbvFm/l4i5RyyS+aUjL+8IuZDD9EH3amg==",
+      "optional": true,
+      "requires": {
+        "@napi-rs/canvas-android-arm64": "0.1.66",
+        "@napi-rs/canvas-darwin-arm64": "0.1.66",
+        "@napi-rs/canvas-darwin-x64": "0.1.66",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.66",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.66",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.66",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.66",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.66"
+      }
+    },
+    "@napi-rs/canvas-android-arm64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.66.tgz",
+      "integrity": "sha512-77Yq9yaUYN90zCovYOpw7LhidJiswU9wLIWWBGF6iiEJyQdt6tkiXpGRZpOMJVO70afkcdc4T7532cxMIBhk0Q==",
+      "optional": true
+    },
+    "@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.66.tgz",
+      "integrity": "sha512-cz3aJ06b8BZGtwRxKTiE0OVUlB17MH8j+BnE4A5+wD9aD1guCCqECsz+k7tpXdAdTAYKRIz2pq6ZuiJ76NyUbQ==",
+      "optional": true
+    },
+    "@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.66.tgz",
+      "integrity": "sha512-szIWqJgFm2OTyGzM+hSiJOaOtjI73VYRC2KN30zZTt7i1+0sgpm5exK5ltDBPOmCdnLt7SbUfpInLj8VvxYlKA==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.66.tgz",
+      "integrity": "sha512-h/TZJFc6JLvp8FwbA5mu+yXiblN0iKqshU7xzd6L+ks5uNYgjS7XWLkNiyPQkMaXQgVczOJfZy7r4NSPK3V8Hg==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.66.tgz",
+      "integrity": "sha512-RGFUdBdi0Xmf+TfwZcB89Ap6hDYh4nzyJhXhNJIgve6ELrIPFhf7sDHvUHxjgW0YzczGoo+ophyCm03cJggu+w==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.66.tgz",
+      "integrity": "sha512-2cFViDIZ0xQlAHyJmyym+rj3p04V16vgAiz64sCAfwOOiW6e19agv1HQWHUsro3G2lF3PaHGAnp0WRPXGqLOfg==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.66.tgz",
+      "integrity": "sha512-Vm5ZWS2RDPeBpnfx83eJpZfJT07xl0jqp8d83PklKqiDNa3BmDZZ/uuI40/ICgejGLymXXYo5N21b7oAxhRTSA==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.66.tgz",
+      "integrity": "sha512-/ptGBhErNBCgWff3khtuEjhiiYWf70oWvBPRj8y5EMB0nLYpve7RxxFnavVvxN49kJ0MQHRIwgfyd47RSOOKPw==",
+      "optional": true
+    },
+    "@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.66.tgz",
+      "integrity": "sha512-XunvXisTkIG+bpq6BcXmsUstoLX3RLS6N9Uz9Pg9RpWIMeM6ObR5shr3NgpGRJq93769I1hS4mJW0DX2Au3WBw==",
+      "optional": true
+    },
+    "@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.66.tgz",
+      "integrity": "sha512-3n34watNFqpwACDA+pt4jfQD6zR8PzfK86FBajdsgDVVZhSp6ohgbbJv+eUrXM08VUtjxTq7+U4sWspTu9+4Ug==",
+      "optional": true
+    },
     "@node-ipc/js-queue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -34769,9 +35030,12 @@
       }
     },
     "pdfjs-dist": {
-      "version": "2.6.347",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
-      "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+      "version": "4.10.38",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
+      "integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
+      "requires": {
+        "@napi-rs/canvas": "^0.1.65"
+      }
     },
     "pend": {
       "version": "1.2.0",
@@ -38584,6 +38848,13 @@
         "raw-loader": "^4.0.2",
         "vue-resize-sensor": "^2.0.0",
         "worker-loader": "^2.0.0"
+      },
+      "dependencies": {
+        "pdfjs-dist": {
+          "version": "2.6.347",
+          "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz",
+          "integrity": "sha512-QC+h7hG2su9v/nU1wEI3SnpPIrqJODL7GTDFvR74ANKGq1AFJW16PH8VWnhpiTi9YcLSFV9xLeWSgq+ckHLdVQ=="
+        }
       }
     },
     "vue-resize-sensor": {

src/pages/explain/index.vue

@@ -1,132 +1,137 @@
 <template>
-  <div class="button_container">
-    <button class="styled_button" @click="loadData(1)">预览文件</button>
-    <button class="styled_button" @click="loadData(2)">下载文件</button>
+  <div class="container_all">
+    <div class="container_public">
+      <div v-if="numPages > 0">
+        <div v-for="pageNumber in numPages" :key="pageNumber">
+          <vue-pdf
+            class="container_pdf"
+            :src="fileUrl"
+            :page="pageNumber"
+            @page-loaded="onPageLoaded"
+          ></vue-pdf>
+        </div>
+      </div>
+
+      <vue-pdf
+        v-else
+        class="container_pdf"
+        :src="fileUrl"
+        @num-pages="setNumPages"
+        v-show="false"
+      ></vue-pdf>
+    </div>
+
+    <img
+      v-if="loadAll"
+      src="../../static/explain/down_up.png"
+      class="absolute_image1"
+      @click="download"
+    />
+    <img
+      v-if="loadAll"
+      src="../../static/explain/scale_in.png"
+      class="absolute_image2"
+      @click="scaleIn"
+    />
+    <img
+      v-if="loadAll"
+      src="../../static/explain/scale_out.png"
+      class="absolute_image3"
+      @click="scaleOut"
+    />
   </div>
 </template>
 
 <script>
 import { detail } from "@/api/explain.js";
+import VuePdf from "vue-pdf";
 
 export default {
+  components: {
+    VuePdf,
+  },
+
   data() {
     return {
-      id: "",
+      loadAll: false,
       name: "",
-      downUrl: "",
-      ///pdf
+      fileUrl: "",
       fileName: "",
+      currentPage: 1,
+      numPages: 0,
+      scale: 1,
     };
   },
 
   onLoad(e) {
     var that = this;
     that.id = e.id;
-    that.loadData(0);
+    that.getDetail();
   },
 
   methods: {
-    // {"data":{"id":"1867094263871967232","name":"测试",
-    // "fileUrl":"https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/c6d1283c8c7141689730700d6cbf990f.xlsx",
-    // "codeUrl":null,"status":0,"sort":1,"createTime":"2024-12-12T06:28:56.000+00:00",
-    // "updateTime":"2024-12-12T06:32:55.000+00:00","categoryId":419013412782082,
-    // "createTimeStr":"2024-12-12 14:28:56","updateTimeStr":"2024-12-12 14:32:55",
-    // "categoryName":"音箱","copyUrl":"http://testweb.radio1964.com/"},"code":0,"message":"",
-    // "requestId":null,"success":true}
-    /// status: 0-单请求数据 1-预览文件 2-下载文件
-    ///状态判断
-    loadData(status) {
-      var that = this;
-      var id = that.id;
-
-      if (status == 0) {
-        that.getDetail(status);
-      } else if (status == 1) {
-        var downUrl = that.downUrl;
-        var fileName = that.fileName;
-        if (downUrl != "") {
-          that.previewFile(fileName, downUrl);
-        } else {
-          that.getDetail(status);
-        }
-      } else if (status == 2) {
-        var downUrl = that.downUrl;
-        if (downUrl != "") {
-          var name = that.name;
-          var fileName = that.fileName;
-          that.downloadFile(name, fileName, downUrl);
-        } else {
-          that.getDetail(status);
-        }
-      }
-    },
-
     ///接口获取数据
-    getDetail(status) {
+    getDetail() {
       var that = this;
       var id = that.id;
 
       detail(id).then((res) => {
         if (res.code === 0) {
           that.name = res.data.name;
-          that.downUrl = res.data.fileUrl;
-          that.fileName = that.getFileExtension(that.downUrl);
-
-          if (status == 1) {
-            that.previewFile(that.fileName, that.downUrl);
-          } else if (status == 2) {
-            that.downloadFile(that.name, that.fileName, that.downUrl);
-          }
+          that.fileUrl = res.data.fileUrl;
+          that.fileName = that.getFileExtension(that.fileUrl);
         }
       });
     },
 
-    previewFile(fileName, downUrl) {
-      /// pdf https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/e61c91c43a054ab5a07d92d547782b7e.pdf
+    ///截取文件
+    getFileExtension(fileUrl) {
+      var filename = fileUrl.split("/").pop();
+      var lastDotIndex = filename.lastIndexOf(".");
+      if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+        return "";
+      } else {
+        return filename.substring(lastDotIndex + 1).toLowerCase();
+      }
+    },
+
+    setNumPages(numPages) {
+      this.numPages = numPages;
+    },
 
-      if (fileName == "pdf" || fileName == "PDF") {
-        uni.navigateTo({
-          url: `/pages/explain/index_pdf?downUrl=${downUrl}`,
-        });
-        return;
+    onPageLoaded(page) {
+      console.log("gadsfqwerqwerqrqr====" + page + "===" + this.numPages);
+      if (this.numPages > 0 && page == this.numPages) {
+        this.loadAll = true;
       }
-      // / doc/docx/xls/xlsx/ppt/pptx
-      window.open(
-        "https://view.officeapps.live.com/op/view.aspx?src=" +
-          encodeURIComponent(downUrl)
-      );
     },
 
-    renderPage(num) {
-      pageRendering = true;
-      pdfDoc.getPage(num).then((page) => {
-        const scale = 1.5; // 页面缩放比例
-        const viewport = page.getViewport({ scale });
-        const canvas = document.createElement("canvas");
-        const context = canvas.getContext("2d");
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
-        const renderContext = {
-          canvasContext: context,
-          viewport: viewport,
-        };
-        const renderTask = page.render(renderContext);
-        renderTask.promise.then(() => {
-          if (!pageRendering) {
-            return;
-          } else {
-            pageRendering = false;
-            if (pageNumPending !== null) {
-              renderPage(pageNumPending);
-              pageNumPending = null;
-            }
-          }
-        });
-      });
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+    },
+
+    nextPage() {
+      if (this.currentPage < this.numPages) {
+        this.currentPage++;
+      }
     },
 
-    async downloadFile(name, fileName, downUrl) {
+    scaleIn() {
+      this.scale *= 1.1;
+    },
+
+    scaleOut() {
+      this.scale /= 1.1;
+    },
+
+    async download() {
       var that = this;
+      var name = that.name;
+      var fileUrl = that.fileUrl;
+      var fileName = that.fileName;
+
       var finalName = "";
       if (name != null && name != "") {
         finalName = name + "." + fileName;
@@ -136,7 +141,7 @@ export default {
 
       try {
         // https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/f5f5ed93fae74fb683e8d116c40a884c.xlsx
-        const response = await fetch(downUrl);
+        const response = await fetch(fileUrl);
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -152,61 +157,68 @@ export default {
         window.URL.revokeObjectURL(url);
       } catch (error) {}
     },
-
-    ///截取文件
-    getFileExtension(downUrl) {
-      var filename = downUrl.split("/").pop();
-      var lastDotIndex = filename.lastIndexOf(".");
-      if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
-        return "";
-      } else {
-        return filename.substring(lastDotIndex + 1).toLowerCase();
-      }
-    },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.pdf_container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  margin: 0 auto;
+<style scoped>
+.container_all {
+  width: 100vw;
+  height: 100%;
 }
 
-.button_container {
+.container_public {
+  width: 100vw;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 100vh;
-  margin: 0 auto;
 }
 
-.styled_button {
-  justify-content: center;
-  background-color: #4caf50; /* Green */
+.container_pdf {
+  width: 100vw;
+  margin: 10px 0;
+}
+
+.absolute_image1 {
+  position: fixed;
+  bottom: 365px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
+  color: white;
   border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.absolute_image2 {
+  position: fixed;
+  bottom: 305px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
   color: white;
-  padding-left: 80;
-  padding-right: 40;
-  padding-top: 40;
-  padding-bottom: 40;
-  text-align: center;
-  align-items: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 10px 0;
+  border: none;
+  border-radius: 5px;
   cursor: pointer;
-  border-radius: 8px;
-  transition: background-color 0.3s;
 }
 
-.styled_button:hover {
-  background-color: #45a049;
+.absolute_image3 {
+  position: fixed;
+  bottom: 260px;
+  right: 20px;
+  width: 30px;
+  height: 30px;
+  padding: 5px 5px;
+  background-color: white;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
 }
 </style>