增加面函下载功能

src/views/Docpan/Show.vue

 <template>
-  <div class="width: 100%;height: 100vh;overflow: auto;" ref="file"></div>
+  <div>
+    <el-button @click="downLoad">点击下载word文件</el-button>
+    <div class="docWrap">
+      <!-- 预览文件的地方（用于渲染） -->
+      <div ref="file"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -15,15 +21,15 @@ export default {
   },
   mixins: [commonProcess],
   mounted() {
-    this.loadWordBlob()
+    this.goPreview ()
   },
   methods: {
-    async loadWordBlob () {
+    async goPreview () {
       let routeQuery = this.$route.query
       const params = {
         index: routeQuery.idx,
       };
-      let res = await Api.post('/service/gitopn/executeDocpan', this.wrapper(params));
+      let res = await Api.post('/service/gitopn/executeDocpan1', this.wrapper(params));
       if (res.respCode == SUCCESS) {
         let base64Str = res.data.executeDocpan;
         let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
@@ -35,6 +41,30 @@ export default {
         let blob = new Blob([u8arr]);
         renderAsync(blob, this.$refs.file)
       }
+    },
+    async downLoad () {
+      let routeQuery = this.$route.query
+      const params = {
+        index: routeQuery.idx,
+      };
+      let res = await Api.post('/service/gitopn/executeDocpan1', this.wrapper(params));
+      if (res.respCode == SUCCESS) {
+        let base64Str = res.data.executeDocpan;
+        let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
+        let length = bstr.length;
+        let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
+        while (length--) {
+          u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
+        }
+        let blob = new Blob([u8arr]);
+        var a = document.createElement("a"); //创建一个<a></a>标签
+        a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
+        a.download = "gitopn.docx"; //设置文件名
+        a.style.display = "none"; // 障眼法藏起来a标签
+        document.body.appendChild(a); // 将a标签追加到文档对象中
+        a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
+        a.remove(); // 一次性的，用完就删除a标签
+      }
     }
   }
 };