配合联调报文面函的word文件预览问题

src/views/Docpan/Show.vue

 <template>
-    <div>
-        <div style="height: 800px; overflow: auto">
-            <embed
-                v-if="this.model.docXML && pdf"
-                :src="pdf"
-                type="application/pdf"
-                height="100%"
-                width="100%"
-            />
-
-            <c-row v-if="!this.model.docXML">
-                <c-col v-for="(item, index) in model.docTXT" :key="index" >
-                    <c-col :offset="4" :span="8">
-                        {{ item[0] }}
-                    </c-col>
-                    <c-col :span="12">
-                        {{ item[1] }}
-                    </c-col>
-                </c-col>
-               
-            </c-row>
-        </div>
-    </div>
+  <div class="width: 100%;height: 100vh;overflow: auto;" ref="file"></div>
 </template>
 
 <script>
-import { getPdf } from "~/service/business/file";
-
+import { renderAsync } from 'docx-preview';
+import Api from '~/service/Api';
+import commonProcess from '~/mixin/commonProcess';
 export default {
-    data() {
-        return {
-            model: { docXML: "" },
-            pdf: "",
-        };
-    },
-    created() {
-        let doclang= window.sessionStorage.doclang||"";
-        this.model.docXML = window.sessionStorage.docXML;
-        this.model.docTXT = window.sessionStorage.docTXT
-            .split("\r\n")
-            .filter((item) => item)
-            .map((item) => {
-                let idx = item.indexOf(":");
-                return [
-                    item.substring(0, idx).trim(),
-                    item.substring(idx + 1).trim(),
-                ];
-            });
-        if (this.model.docXML != "")
-            getPdf({ xml: this.model.docXML, doclang: window.sessionStorage.docuil }).then((res) => {
-                if (res.respCode == SUCCESS) {
-                    this.pdf ="data:application/pdf;base64,"+ res.data;
-                }
-            });
-    },
+  data() {
+    return {
+      model: { docXML: '' },
+      pdf: '',
+    };
+  },
+  mixins: [commonProcess],
+  mounted() {
+    this.loadWordBlob()
+  },
+  methods: {
+    async loadWordBlob () {
+      let routeQuery = this.$route.query
+      const params = {
+        index: routeQuery.idx,
+      };
+      let res = await Api.post('/service/gitopn/executeDocpan', 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]);
+        renderAsync(blob, this.$refs.file)
+      }
+    }
+  }
 };
 </script>
 
 <style scoped>
-</style>
\ No newline at end of file
+::v-deep .docx-wrapper {
+  width: 100%;
+  height: 100vh;
+  padding: 0;
+  overflow: auto;
+}
+</style>