feat: 调整电子后台放大和缩小功能

src/pages/explain/index copy.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="button_container">
+    <button class="styled_button" @click="loadData(1)">预览文件</button>
+    <button class="styled_button" @click="loadData(2)">下载文件</button>
+  </div>
+</template>
+
+<script>
+import { detail } from "@/api/explain.js";
+
+export default {
+  data() {
+    return {
+      id: "",
+      name: "",
+      downUrl: "",
+      ///pdf
+      fileName: "",
+    };
+  },
+
+  onLoad(e) {
+    var that = this;
+    that.id = e.id;
+    that.loadData(0);
+  },
+
+  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) {
+      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);
+          }
+        }
+      });
+    },
+
+    previewFile(fileName, downUrl) {
+      /// pdf https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/e61c91c43a054ab5a07d92d547782b7e.pdf
+
+      if (fileName == "pdf" || fileName == "PDF") {
+        uni.navigateTo({
+          url: `/pages/explain/index_pdf?downUrl=${downUrl}`,
+        });
+        return;
+      }
+      // / 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;
+            }
+          }
+        });
+      });
+    },
+
+    async downloadFile(name, fileName, downUrl) {
+      var that = this;
+      var finalName = "";
+      if (name != null && name != "") {
+        finalName = name + "." + fileName;
+      } else {
+        finalName = new Date().getTime() + "." + fileName;
+      }
+
+      try {
+        // https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/f5f5ed93fae74fb683e8d116c40a884c.xlsx
+        const response = await fetch(downUrl);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.style.display = "none";
+        a.href = url;
+        a.download = finalName;
+        document.body.appendChild(a);
+        a.click();
+        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;
+}
+
+.button_container {
+  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 */
+  border: none;
+  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;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+}
+
+.styled_button:hover {
+  background-color: #45a049;
+}
+</style>

src/pages/explain/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container_all">
-    <div class="container_public">
+    <div class="container_public" :style="{ transform: `scale(${scale})` }">
       <div v-if="numPages > 0">
         <div v-for="pageNumber in numPages" :key="pageNumber">
           <vue-pdf
@@ -100,7 +100,6 @@ export default {
     },
 
     onPageLoaded(page) {
-      console.log("gadsfqwerqwerqrqr====" + page + "===" + this.numPages);
       if (this.numPages > 0 && page == this.numPages) {
         this.loadAll = true;
       }

src/pages/operation/index.vue

@@ -12,11 +12,11 @@
           <view style="width: 50%">
             <img mini src="../../static/operation/left.png" />
             <view flex center>
-              <img mini src="../../static/operation/last.png" />
+              <img mini src="../../static/operation/last.png" />
               <text>上一首</text>
             </view>
           </view>
-          <view style="width: 50%">
+          <view style="width: 50%">
             <img mini src="../../static/operation/right.png" />
             <view flex center>
               <img mini src="../../static/operation/next.png" />