feat: 添加pdf预览界面

package.json

@@ -76,9 +76,14 @@
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
     "js-base64": "^3.7.5",
+    "pdfjs-dist": "^4.9.155",
     "regenerator-runtime": "^0.12.1",
     "vconsole": "^3.15.1",
     "vue": "^2.6.11",
+    "vue-pdf": "^4.3.0",
+    "vue-pdf-embed": "^2.1.1",
+    "vue3-pdf-app": "^1.0.3",
+    "vue3-pdfjs": "^0.1.6",
     "vuex": "^3.2.0"
   },
   "devDependencies": {

src/pages.json

@@ -262,6 +262,14 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+
+    {
+      // 说明书内容-pdf
+      "path": "pages/explain/index_pdf",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ]
 }

src/pages/explain/index.vue

@@ -7,12 +7,15 @@
 
 <script>
 import { detail } from "@/api/explain.js";
+
 export default {
   data() {
     return {
       id: "",
       name: "",
       downUrl: "",
+      ///pdf
+      fileName: "",
     };
   },
 
@@ -35,12 +38,14 @@ export default {
     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(downUrl);
+          that.previewFile(fileName, downUrl);
         } else {
           that.getDetail(status);
         }
@@ -48,7 +53,8 @@ export default {
         var downUrl = that.downUrl;
         if (downUrl != "") {
           var name = that.name;
-          that.downloadFile(name, downUrl);
+          var fileName = that.fileName;
+          that.downloadFile(name, fileName, downUrl);
         } else {
           that.getDetail(status);
         }
@@ -59,30 +65,68 @@ export default {
     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.downUrl);
+            that.previewFile(that.fileName, that.downUrl);
           } else if (status == 2) {
-            that.downloadFile(that.name, that.downUrl);
+            that.downloadFile(that.name, that.fileName, that.downUrl);
           }
         }
       });
     },
 
-    previewFile(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)
       );
     },
 
-    async downloadFile(name, downUrl) {
-      console.log("asdfgasdgadfg==0==" + name);
+    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 fileName = that.getFileExtension(downUrl);
       var finalName = "";
       if (name != null && name != "") {
         finalName = name + "." + fileName;
@@ -90,7 +134,6 @@ export default {
         finalName = new Date().getTime() + "." + fileName;
       }
 
-      console.log("asdfgasdgadfg==1==" + finalName);
       try {
         // https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/f5f5ed93fae74fb683e8d116c40a884c.xlsx
         const response = await fetch(downUrl);
@@ -107,9 +150,7 @@ export default {
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
-      } catch (error) {
-        console.log("asdfgasdgadfg==2==" + error);
-      }
+      } catch (error) {}
     },
 
     ///截取文件
@@ -127,6 +168,15 @@ export default {
 </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;

src/pages/explain/index_pdf.vue

@@ -0,0 +1,123 @@
+<template>
+  <!-- pdf_container -->
+  <div class="">
+    <pdf
+      :src="downUrl"
+      :page="pageNum"
+      @num-pages="setNumPages"
+      @page-loaded="onPageLoaded"
+    ></pdf>
+
+    <!-- <p>当前页: {{ pageNum }} / {{ numPages }}</p>
+    <button @click="prevPage">上一页</button>
+    <button @click="nextPage">下一页</button> -->
+  </div>
+</template>
+
+<script>
+import pdf from "vue-pdf";
+
+export default {
+  components: {
+    pdf,
+  },
+
+  data() {
+    return {
+      downUrl: "",
+      pageNum: 1,
+      numPages: 0,
+    };
+  },
+
+  onLoad(e) {
+    var that = this;
+    that.downUrl = e.downUrl;
+  },
+  
+
+  methods: {
+    handleWheel(event) {
+      const deltaY = event.deltaY;
+      console.log("gadsfqwerqweqr====" + deltaY);
+      if (deltaY > 0) {
+        this.prevPage();
+      } else {
+        this.nextPage();
+      }
+    },
+
+    prevPage() {
+      var page = this.pageNum;
+      if (page > 1) {
+        this.pageNum--;
+      }
+    },
+
+    nextPage() {
+      var page = this.pageNum;
+      if (page < this.numPages - 1) {
+        this.pageNum++;
+      }
+    },
+
+    setNumPages(numPagesData) {
+      this.numPages = numPagesData;
+    },
+
+    onPageLoaded(page) {
+      // this.pageNum = page;
+      // // 这里可以添加你的页数控制逻辑
+      // // 例如: 当PDF有超过100页时停止加载更多页面
+      // if (this.numPages > 100) {
+      //   // 使用vue-pdf的stop方法停止加载
+      //   this.$refs.pdfComponent.stop();
+      // }
+    },
+  },
+};
+</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>