导出word文本

package.json

@@ -25,11 +25,16 @@
     "codemirror": "^5.53.2",
     "core-js": "^2.6.12",
     "crypto-js": "^3.1.9-1",
+    "docxtemplater": "^3.29.4",
     "echarts": "^4.2.1",
     "element-ui": "2.12.0",
+    "file-saver": "^2.0.5",
     "js-cookie": "^2.2.0",
+    "jszip": "^3.9.1",
+    "jszip-utils": "^0.1.0",
     "less-loader": "^6.0.0",
     "nprogress": "^0.2.0",
+    "pizzip": "^3.1.1",
     "quill": "^1.3.7",
     "script-loader": "^0.7.2",
     "sockjs-client": "1.0.0",

src/views/Receive/index.vue

@@ -7,7 +7,7 @@
     <div class="topbox">
       <div class="topzuo">
         <div class="title" style="display: flex">
-          <div style="flex: 1">
+          <div style="flex-grow: 1">
             <span class="span1"
               >{{
                 userinformationlist.visitRecord == 1
@@ -21,7 +21,7 @@
               }}
             </span>
           </div>
-          <div style="width: 120px; display: flex; color: #2671e2">
+          <div style="flex-shrink: 0; display: flex; color: #2671e2">
             <div v-if="rec_index_addJ" @click="Addtodigest()">加精</div>
             <div
               v-if="rec_index_receflag"
@@ -30,6 +30,8 @@
             >
               {{ userinformationlist.validInvalidName }}
             </div>
+            <!-- 导出 -->
+            <div class="outDownLoad" @click="exportWord">导出话术</div>
           </div>
         </div>
         <div class="title" style="margin-top: 6px">
@@ -160,7 +162,13 @@
                 </div>
               </div>
               <div v-if="rec_index_flag" class="headpade">
-                <div class="biaoji" @click="biaoji()" v-if="userinformationlist.merge==0">标记</div>
+                <div
+                  class="biaoji"
+                  @click="biaoji()"
+                  v-if="userinformationlist.merge == 0"
+                >
+                  标记
+                </div>
               </div>
             </div>
             <div style="width: 100%">
@@ -195,10 +203,17 @@
                       {{ item.bg | timestamp }}
                     </div>
                     <div class="textcontent">
-                      <div class="content123s"
-                      :class="{ adjskdjroleindexclass: item.isShow == 1 }"
-                      v-html="item.onebest"></div>
-                      <img @click.stop="play(item)" src="../../../public/img/play.png" alt="" style="flex-shrink: 0;width: 24px;height: 24px;">
+                      <div
+                        class="content123s"
+                        :class="{ adjskdjroleindexclass: item.isShow == 1 }"
+                        v-html="item.onebest"
+                      ></div>
+                      <img
+                        @click.stop="play(item)"
+                        src="../../../public/img/play.png"
+                        alt=""
+                        style="flex-shrink: 0; width: 24px; height: 24px"
+                      />
                     </div>
                   </div>
                 </div>
@@ -400,10 +415,18 @@
     >
       <el-form :model="form" ref="form" label-width="80px" :rules="rules">
         <el-form-item label="常错词" prop="wrongWord">
-          <el-input v-model="form.wrongWord" maxlength="8" autocomplete="off"></el-input>
+          <el-input
+            v-model="form.wrongWord"
+            maxlength="8"
+            autocomplete="off"
+          ></el-input>
         </el-form-item>
         <el-form-item label="正确词" prop="correctWord">
-          <el-input v-model="form.correctWord" maxlength="8" autocomplete="off"></el-input>
+          <el-input
+            v-model="form.correctWord"
+            maxlength="8"
+            autocomplete="off"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -735,6 +758,12 @@ import "aplayer/dist/APlayer.min.css";
 import APlayer from "aplayer";
 import { mapGetters } from "vuex";
 import { getStore, setStore } from "@/util/store";
+
+import docxtemplater from "docxtemplater";
+import PizZip from "pizzip";
+import JSZipUtils from "jszip-utils";
+import { saveAs } from "file-saver";
+
 export default {
   data() {
     return {
@@ -815,6 +844,8 @@ export default {
       rec_index_todo: false,
       rec_index_receflag: false,
       rec_index_textyh: false,
+
+      outSpeechSkillList: [], // 导出话术列表
     };
   },
   created() {
@@ -869,6 +900,67 @@ export default {
   },
 
   methods: {
+    // 格式化话术内容
+    formatAudioList() {
+      let list = this.arr[0].audioContent
+      list = JSON.parse(list)
+      console.log(list)
+      list.map(item => {
+        this.outSpeechSkillList.push({
+          id: this.$options.filters.toCapital(item.speaker),
+          times: this.$options.filters.timestamp(item.bg),
+          content: item.onebest.replace(/<.*?>/gi, "")
+        })
+      })
+
+      console.log(this.outSpeechSkillList)
+    },
+
+    
+    // 导出word
+    exportWord() {
+      // 读取并获得模板文件的二进制内容
+      JSZipUtils.getBinaryContent("/model.docx", (error, content) => {
+        console.log(error, content);
+        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
+        // 抛出异常
+        if (error) {
+          throw error;
+        }
+        // 创建一个PizZip实例，内容为模板的内容
+        let zip = new PizZip(content);
+        // 创建并加载docxtemplater实例对象
+        let doc = new docxtemplater().loadZip(zip);
+        // 设置模板变量的值
+        doc.setData({
+          audioList: this.outSpeechSkillList,
+        });
+        try {
+          // 用模板变量的值替换所有模板变量
+          doc.render();
+        } catch (error) {
+          // 抛出异常
+          let e = {
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            properties: error.properties,
+          };
+          console.log(JSON.stringify({ error: e }));
+          throw error;
+        }
+
+        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
+        let out = doc.getZip().generate({
+          type: "blob",
+          mimeType:
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        });
+        // 将目标文件对象保存为目标类型的文件，并命名
+        saveAs(out, "接待话术.docx");
+      });
+    },
+
     // 返回颜色
     spackerColor(index) {
       let obj = {
@@ -1362,8 +1454,14 @@ export default {
     subMsg() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          this.form.correctWord = this.ruleForm.correctWord.replace(/[^\w\u4e00-\u9fa5]/g,"")
-          this.form.wrongWord = this.ruleForm.wrongWord.replace(/[^\w\u4e00-\u9fa5]/g,"")
+          this.form.correctWord = this.ruleForm.correctWord.replace(
+            /[^\w\u4e00-\u9fa5]/g,
+            ""
+          );
+          this.form.wrongWord = this.ruleForm.wrongWord.replace(
+            /[^\w\u4e00-\u9fa5]/g,
+            ""
+          );
           this.dialogFormVisible = false;
           let sas = this.textItself.replace(
             this.form.wrongWord,
@@ -1391,7 +1489,7 @@ export default {
 
     // 播放
     play(item) {
-      let num = parseInt(item.bg / 1000)
+      let num = parseInt(item.bg / 1000);
       this.aplayer.seek(num);
       this.searchisshow = false;
       this.aplayer.play();
@@ -1635,6 +1733,7 @@ export default {
         this.aplayerLength = audopbj.length;
         this.arr = res.data;
         this.bofangchushihua();
+        this.formatAudioList()
       });
     },
     tapspagek(i) {
@@ -1829,8 +1928,8 @@ export default {
   text-align: left;
 
   .textcontent {
-      flex-direction: row-reverse;
-      text-align: left;
+    flex-direction: row-reverse;
+    text-align: left;
   }
 }
 
@@ -2083,6 +2182,10 @@ export default {
         margin-left: 2px;
       }
     }
+
+    .outDownLoad {
+      margin: 0 0 0 0.5em;
+    }
   }
   .topyou {
     width: 24%;

src/views/Statistics/TheTeamCompared.vue

@@ -117,7 +117,7 @@
         </div>
         <div
           v-if="teamobj1.list.length != 0"
-          style="min-height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj1.list" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
@@ -132,7 +132,6 @@
         </div>
         <div
           class="nulllist"
-          style="height: 300px"
           v-if="teamobj1.list.length == 0"
         >
           <div class="imgboxc">
@@ -159,7 +158,7 @@
         </div>
         <div
           v-if="teamobj2.list.length != 0"
-          style="min-height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj2.list" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
@@ -174,7 +173,6 @@
         </div>
         <div
           class="nulllist"
-          style="height: 300px"
           v-if="teamobj2.list.length == 0"
         >
           <div class="imgboxc">
@@ -218,7 +216,7 @@
         </div>
         <div
           v-if="teamobj3.list.length != 0"
-          style="min-height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj3.list" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
@@ -233,7 +231,6 @@
         </div>
         <div
           class="nulllist"
-          style="height: 300px"
           v-if="teamobj3.list.length == 0"
         >
           <div class="imgboxc">
@@ -249,9 +246,9 @@
         <div
           id="main"
           v-if="isshowcd2 == true"
-          style="height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         ></div>
-        <div class="nulllist" style="height: 372px" v-if="isshowcd2 == false">
+        <div class="nulllist" v-if="isshowcd2 == false">
           <div class="imgboxc">
             <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
             <div class="nulltext">暂无数据</div>
@@ -293,7 +290,7 @@
         </div>
         <div
           v-if="teamobj5.list.length != 0"
-          style="min-height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         >
           <div class="jinbox" v-for="(item, i) in teamobj5.list" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
@@ -308,7 +305,6 @@
         </div>
         <div
           class="nulllist"
-          style="height: 300px"
           v-if="teamobj5.list.length == 0"
         >
           <div class="imgboxc">
@@ -324,9 +320,9 @@
         <div
           v-if="isshowcd == true"
           id="main2"
-          style="min-height: 350px; width: 94%; margin: 0 auto"
+          style="width: 94%; margin: 0 auto"
         ></div>
-        <div class="nulllist" style="height: 370px" v-if="isshowcd == false">
+        <div class="nulllist" v-if="isshowcd == false">
           <div class="imgboxc">
             <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
             <div class="nulltext">暂无数据</div>
@@ -997,7 +993,6 @@ tbody tr {
   margin-top: 15px;
   .zuo {
     flex: 1;
-    height: 100%;
     margin-right: 15px;
     background: #ffffff;
     border-radius: 4px;
@@ -1024,7 +1019,6 @@ tbody tr {
     }
   }
   .you {
-    height: 100%;
     flex: 1;
     background: #ffffff;
     border-radius: 4px;
@@ -1049,6 +1043,13 @@ tbody tr {
         align-items: center;
       }
     }
+
+    #main {
+      height: calc(400px - 55px);
+    }
+    #main2 {
+      height: calc(400px - 55px);
+    }
   }
 }
 
@@ -1113,4 +1114,8 @@ tbody tr {
   font-size: 16px;
   color: #32363d;
 }
+
+.nulllist {
+  flex: 1;
+}
 </style>

vue.config.js

@@ -10,8 +10,8 @@
 // const url = 'http://62.234.122.43:9999' //正式
 // const url = 'http://81.70.55.170:9999' // 新测试服务器IP
 // const url = 'http://192.168.31.89:9999' //sh
-// const url = 'https://zanyong.hfju.com' // 正式域名
-const url = 'http://81.70.55.170:9999' // 新测试
+const url = 'https://zanyong.hfju.com' // 正式域名
+// const url = 'http://81.70.55.170:9999' // 新测试
 // const url = 'http://82.156.35.22:9999' // 新正式ip
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']