讲义需求调整-完整版

package-lock.json

@@ -136,11 +136,21 @@
       "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
       "dev": true
     },
+    "@vue-office/docx": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@vue-office/docx/-/docx-0.2.4.tgz",
+      "integrity": "sha512-t+e7cRW8Pz15JrjCST79IJ1/f38mebptVQsS8d8ThpthysCRXH8aPQiCWNHqMtz4rUSkg4+9SpHn35/Zkx0ahg=="
+    },
     "@vue-office/excel": {
       "version": "0.2.10",
       "resolved": "https://registry.npmjs.org/@vue-office/excel/-/excel-0.2.10.tgz",
       "integrity": "sha512-XuCkdl1+aRuF64U+cwhgizXciiR0IY3RkxCaaEGTmtbZu/ye2RAMUAgIxcf5/0/RC6ZJ+2wU5n+zryxNRjEwlQ=="
     },
+    "@vue-office/pdf": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@vue-office/pdf/-/pdf-0.2.5.tgz",
+      "integrity": "sha512-DxJgBhnB7wdnhDnGK/ZDKPGszytYVnKdTofAWa+SZaJzHo87vHA2VtSJRTqAlePGJLLciLCSMsaEG7PskxZmSA=="
+    },
     "@vue/composition-api": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.7.1.tgz",

package.json

@@ -16,7 +16,9 @@
     "build:zz": "cross-env NODE_ENV=production ENV_ID=zz node build/build.js"
   },
   "dependencies": {
+    "@vue-office/docx": "^0.2.4",
     "@vue-office/excel": "^0.2.10",
+    "@vue-office/pdf": "^0.2.5",
     "@vue/composition-api": "^1.7.1",
     "axios": "^0.26.1",
     "docx-preview": "^0.1.15",

src/pages/course-detail/components/HandOut.vue

@@ -71,14 +71,14 @@
         </span>
       </el-tree>
     </div>
-    <div
-      class="pdf_box"
-      v-show="showId != null"
-      v-infinite-scroll="loadscroll"
-      :infinite-scroll-delay="200"
-      :infinite-scroll-distance="50"
-    >
-      <div id="bodyContainer" v-if="ShowAlist === 'docx'"></div>
+    <div class="office_box" v-show="showId != null">
+      <vue-office-docx
+        style="height: 376px"
+        v-if="ShowAlist === 'docx'"
+        :src="readerResult"
+        @rendered="rendered"
+        @error="errorHandler"
+      />
       <vue-office-excel
         style="height: 376px;overflow: hidden;"
         v-else-if="ShowAlist === 'xlsx'"
@@ -87,22 +87,13 @@
         @error="errorHandler"
         :key="12"
       />
-      <template v-else>
-        <pdf
-          class="iframe"
-          :src="$tools.splitImgHost(activeItem.url)"
-          v-for="i in pdfCounts"
-          :key="i"
-          :page="i"
-          ref="pdf"
-        ></pdf>
-        <iframe
-          id="printIframe"
-          :src="$tools.splitImgHost(activeItem.url)"
-          frameborder="0"
-          style="display: none"
-        ></iframe>
-      </template>
+      <vue-office-pdf
+        style="height: 376px;"
+        v-else
+        :src="readerResult"
+        @rendered="rendered"
+        @error="errorHandler"
+      />
     </div>
     <p
       class="no_center"
@@ -116,15 +107,19 @@
 </template>
 
 <script>
-import axios from "axios";
-import { renderAsync } from "docx-preview";
+//引入VueOfficeDocx组件
+import VueOfficeDocx from "@vue-office/docx";
+//引入VueOfficeExcel组件
 import VueOfficeExcel from "@vue-office/excel";
+//引入VueOfficePdf组件
+import VueOfficePdf from "@vue-office/pdf";
+//引入相关样式
+import "@vue-office/docx/lib/index.css";
 import "@vue-office/excel/lib/index.css";
-import pdf from "vue-pdf";
-import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
+import axios from "axios";
 import Print from "print-js";
 export default {
-  components: { pdf, VueOfficeExcel },
+  components: { VueOfficeExcel, VueOfficePdf, VueOfficeDocx },
   props: {
     goodsData: {
       type: Object,
@@ -143,8 +138,7 @@ export default {
       },
       courseHandoutsData: {},
       showId: null, //当前显示pdfID号
-      activeItem: {},
-      pdfCounts: 0
+      activeItem: {}
     };
   },
   computed: {
@@ -171,30 +165,14 @@ export default {
     }
   },
   methods: {
-    //渲染docx
-    docxRender(url, fileName) {
-      axios({
-        method: "get",
-        responseType: "blob", // 设置响应文件格式
-        url: url
-      }).then(({ data }) => {
-        let array = [
-          document.getElementById("bodyContainer"),
-          document.getElementById("bodyContainers")
-        ];
-        for (let i = 0; i < array.length; i++) {
-          renderAsync(data, array[i]); // 渲染到页面预览
-        }
-      });
-    },
     rendered() {},
     errorHandler(e) {
-      this.$message.error("表格内容不支持预览");
+      this.$message.error("内容不支持预览");
       console.log("错误", e);
       return;
     },
     //渲染xlsx
-    xlsxRender(url, fileName) {
+    officeRender(url, fileName) {
       axios({
         method: "get",
         responseType: "blob", // 设置响应文件格式
@@ -216,10 +194,6 @@ export default {
       };
       return false;
     },
-    getTable(sheetName) {
-      var worksheet = this.workbook.Sheets[sheetName];
-      this.excelData = xlsxs.utils.sheet_to_json(worksheet);
-    },
     filterNode(value, data, node) {
       let parentNode = node.parent; // 父级node
       let labels = [node.label]; // 当前node的名字
@@ -317,76 +291,33 @@ export default {
       }
       return obj;
     },
-    loadscroll() {
-      if (!this.pdfCounts && this.activeItem.pdf) {
-        if (this.activeItem.pdf >= 4) {
-          this.pdfCounts = 4;
-        } else {
-          this.pdfCounts = this.activeItem.pdf;
-        }
-      }
-      if (this.pdfCounts < this.activeItem.pdf) {
-        this.pdfCounts++;
-      } else {
-        return;
-      }
-    },
     //点击预览加载
     loadSeePdf(item) {
+      this.readerResult = null;
       console.log(item, "item");
       if (Object.keys(item).length == 0) {
         this.$message.error("当前选择文件不存在");
         return;
       }
-      if (item.urlName.slice(item.urlName.indexOf(".") + 1) === "docx") {
-        this.showId = item.fileId;
-        this.activeItem = item;
-        this.$emit("backSwitchPdfData", item);
-        this.docxRender(this.$tools.splitImgHost(item.url));
-        return;
-      }
-      if (item.urlName.slice(item.urlName.indexOf(".") + 1) === "xlsx") {
+      var str = item.urlName.slice(item.urlName.indexOf(".") + 1);
+      if (str === "docx" || str === "xlsx" || str === "pdf") {
         this.showId = item.fileId;
         this.activeItem = item;
-        this.$emit("backSwitchPdfData", item);
-        this.xlsxRender(this.$tools.splitImgHost(item.url));
+        this.$emit("backSwitchOfficeData", item);
+        this.officeRender(this.$tools.splitImgHost(item.url));
         return;
       }
-      if (item.pdf) {
-        this.showId = item.fileId;
-        this.activeItem = item;
-        if (item.pdf >= 4) {
-          this.pdfCounts = 4;
-        } else {
-          this.pdfCounts = item.pdf;
-        }
-        this.$emit("backSwitchPdfData", item);
-        return;
-      }
-      const loadingTask = pdf.createLoadingTask({
-        url: this.$tools.splitImgHost(item.url),
-        CMapReaderFactory,
-        cMapPacked: true
-      });
-      loadingTask.promise
-        .then(pdf => {
-          item.pdf = pdf.numPages;
-          this.showId = item.fileId;
-          this.activeItem = item;
-          if (item.pdf >= 4) {
-            this.pdfCounts = 4;
-          } else {
-            this.pdfCounts = item.pdf;
-          }
-          this.$emit("backSwitchPdfData", item);
-        })
-        .catch(err => {});
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+/deep/ .vue-office-pdf-wrapper {
+  & > canvas {
+    width: 100% !important;
+  }
+}
 .el-tree {
   background-color: #3f4449;
   color: #fff;
@@ -408,7 +339,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding-right: 8px;
-  
+
   & > .node_label1 {
     flex: 1;
     width: 1px;
@@ -479,7 +410,7 @@ export default {
       }
     }
   }
-  .pdf_box {
+  .office_box {
     flex: 1;
     overflow: auto;
   }

src/pages/course-detail/index.vue

@@ -36,53 +36,37 @@
                     id="player"
                   ></div>
                   <div
-                    v-if="switchPdf.pdf || ShowAlist !== ''"
+                    v-if="ShowAlist !== ''"
                     :class="!switchBox ? 'smallBox overStyle' : 'switchPdf'"
                     :style="!switchBox && hideBox ? 'display:none;' : ''"
                   >
                     <div
-                      v-if="
-                        (switchPdf.pdf && switchPdf.pdf > 0) || ShowAlist !== ''
-                      "
-                      v-infinite-scroll="loadscroll"
-                      :infinite-scroll-delay="200"
-                      :infinite-scroll-distance="50"
+                      v-if="ShowAlist !== ''"
                     >
-                      <div
-                        id="bodyContainers"
+                      <vue-office-docx
+                        style="width:808px;height: 452px!important;"
                         v-if="ShowAlist === 'docx'"
-                      ></div>
+                        :src="readerResult"
+                      />
                       <vue-office-excel
                         style="width:808px;height: 452px!important;overflow: hidden;"
                         v-else-if="ShowAlist === 'xlsx'"
                         :src="readerResult"
                       />
-                      <template v-else>
-                        <pdf
-                          class="iframe"
-                          :src="$tools.splitImgHost(switchPdf.url)"
-                          v-for="i in counts"
-                          :key="i"
-                          :page="i"
-                          ref="pdf"
-                          @page-loaded="pageLoaded"
-                        ></pdf>
-                        <iframe
-                          id="printIframe"
-                          :src="$tools.splitImgHost(switchPdf.url)"
-                          frameborder="0"
-                          style="display: none"
-                        ></iframe>
-                      </template>
+                      <vue-office-pdf
+                        style="width:808px;height: 452px!important;"
+                        v-else-if="ShowAlist === 'pdf'"
+                        :src="readerResult"
+                      />
                     </div>
                   </div>
                   <i
-                    v-if="!hideBox && (switchPdf.pdf || ShowAlist !== '')"
+                    v-if="!hideBox && ShowAlist !== ''"
                     class="switch el-icon-monitor"
                     @click="switchBoxFunc"
                   ></i>
                   <i
-                    v-if="switchPdf.pdf || ShowAlist !== ''"
+                    v-if="ShowAlist !== ''"
                     class="hideSwitchBox el-icon-view"
                     @click="hideBox = !hideBox"
                   ></i>
@@ -94,7 +78,7 @@
                     您上次看{{
                       $tools.secondToTime(recordObj.videoCurrentTime)
                     }},正在自动续播
-                    <span
+                    <span 
                       style="
                         display: inline-block;
                         width: 50px;
@@ -177,7 +161,7 @@
                             <Hand-out
                               ref="handOut"
                               :goodsData="goodsData"
-                              @backSwitchPdfData="backSwitchPdfData"
+                              @backSwitchOfficeData="backSwitchOfficeData"
                             ></Hand-out>
                           </template>
                         </el-tab-pane>
@@ -894,12 +878,18 @@ import ToolBar from "@/components/toolbar/index";
 import GoodsItem from "@/components/goodsItem/index";
 import * as imageConversion from "image-conversion";
 import { mapGetters, mapMutations, mapActions } from "vuex";
-import pdf from "vue-pdf";
 import CourseTree from "./components/CourseTree.vue";
 import AnswerQuestions from "./components/AnswerQuestions.vue";
 import Notes from "./components/Notes.vue";
 import HandOut from "./components/HandOut.vue";
+//引入VueOfficeDocx组件
+import VueOfficeDocx from "@vue-office/docx";
+//引入VueOfficeExcel组件
 import VueOfficeExcel from "@vue-office/excel";
+//引入VueOfficePdf组件
+import VueOfficePdf from "@vue-office/pdf";
+//引入相关样式
+import "@vue-office/docx/lib/index.css";
 import "@vue-office/excel/lib/index.css";
 export default {
   name: "CourseDetail",
@@ -907,13 +897,14 @@ export default {
     Footer,
     Header,
     ToolBar,
-    pdf,
     GoodsItem,
     CourseTree,
     AnswerQuestions,
     Notes,
     HandOut,
-    VueOfficeExcel
+    VueOfficeDocx,
+    VueOfficeExcel,
+    VueOfficePdf
   },
   data() {
     return {
@@ -922,8 +913,6 @@ export default {
       switchPdf: {}, //pdf数据
       liveDuration: 0,
       numPages: 0,
-      // loadingPage: 0, //当前加载pdf页面数量
-      counts: 0,
       showPdf: false,
       // 总页数
       pdfPages: 10,
@@ -1422,46 +1411,16 @@ export default {
   methods: {
     ...mapMutations(["getCartCount"]),
     ...mapActions(["getUserInfo"]),
-    loadscroll() {
-      if (!this.counts && this.switchPdf.pdf) {
-        if (this.switchPdf.pdf >= 4) {
-          this.counts = 4;
-        } else {
-          this.counts = this.switchPdf.pdf;
-        }
-      }
-      if (this.counts < this.switchPdf.pdf) {
-        this.counts++;
-      } else {
-        return;
-      }
-    },
     switchBoxFunc() {
-      // if (this.loadingPage === this.switchPdf.pdf) {
       this.switchBox = !this.switchBox;
-      // } else {
-      //   this.$message.warning("PDF加载中,请耐心等待");
-      //   return;
-      // }
-    },
-    pageLoaded(e) {
-      console.log("pdf页面总数：", this.switchPdf.pdf, "当前已加载总数:", e);
-      if (this.switchPdf.pdf === e) {
-        this.$message.success("PDF已全部加载，如出现模糊问题，请尝试重新切换");
-        // this.loadingPage = e;
-      }
     },
-    backSwitchPdfData(item) {
-      this.counts = 0;
+    backSwitchOfficeData(item) {
       this.switchPdf = item;
-      if (this.ShowAlist === "xlsx") {
-        this.xlsxRender(this.$tools.splitImgHost(item.url));
-      } else if (this.ShowAlist === "pdf") {
-        this.loadscroll();
-      }
+      this.readerResult = null;
+      this.officeRender(this.$tools.splitImgHost(item.url));
     },
     //渲染xlsx
-    xlsxRender(url, fileName) {
+    officeRender(url, fileName) {
       axios({
         method: "get",
         responseType: "blob", // 设置响应文件格式
@@ -1480,7 +1439,6 @@ export default {
       reader.onload = loadEvent => {
         let arrayBuffer = loadEvent.target.result;
         this.readerResult = arrayBuffer;
-        console.log("readerResult:", this.readerResult);
       };
       return false;
     },
@@ -3350,7 +3308,6 @@ export default {
             ];
           }
           this.courseBusiness();
-          // this.courseHandouts();
           if (self.goodsData.goodsPlayConfig) {
             self.goodsPlayConfig = JSON.parse(self.goodsData.goodsPlayConfig);
             if (self.goodsPlayConfig.autoPlay > 0) {
@@ -4529,28 +4486,6 @@ export default {
         });
     },
 
-    /**
-     * 获取讲义权限
-     */
-    courseHandouts() {
-      if (this.goodsData.handoutsId) {
-        this.$request
-          .courseHandouts(this.goodsData.handoutsId)
-          .then(res => {
-            this.courseHandoutsData = res.data;
-            const loadingTask = pdf.createLoadingTask(
-              this.$tools.splitImgHost(this.courseHandoutsData.handoutsUrl)
-            );
-            loadingTask.promise
-              .then(pdf => {
-                this.numPages = pdf.numPages;
-              })
-              .catch(err => {});
-          })
-          .catch(err => {});
-      }
-    },
-
     /**
      * 获取培训项目详情
      */