修改word回显

src/views/accessrecords/statement/ProcessMaterialsPlanStatement.vue

@@ -1,17 +1,8 @@
 <template>
   <div >
-    <a-card :bordered="false" style="width: 100%;height: 730px">
-
-      <div class="table-operator" style="width: 18%">
-        <!--            <a-button type="primary">-->
-        <!--              预览-->
-        <!--            </a-button>-->
-<!--       <spen size="200px">采购申请表</spen>-->
-<!--                    <a-button type="primary">-->
-<!--                      打印-->
-<!--                    </a-button>-->
-      </div>
-      <div style="width: 100%;height: 100%">
+
+<!--      <div style="width: 100%;height: 100%">
+
         <iframe class="iframe"
                 :src="srcHtml"
                 frameborder="0"
@@ -20,20 +11,26 @@
         >
 
         </iframe>
-      </div>
+      </div>-->
+      <button @click="goPreview">点击预览word文件</button>
 
 
 
-    </a-card>
-
+    <div class="docWrap">
+      <!-- 预览文件的地方（用于渲染） -->
+      <div ref="file"></div>
+    </div>
   </div>
+
 </template>
 
 <script>
-  import { getAction } from '@api/manage'
+  const VALIDATE_NO_PASSED = Symbol()
+  import pick from 'lodash.pick'
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-
+  import { getAction,downFile} from '@/api/manage';
+  let docx = require("docx-preview");
   export default {
     name: "ProcessMaterialPlan",
     mixins:[JeecgListMixin,mixinDevice],
@@ -64,6 +61,7 @@
         srcHtml : '',
         url:{
           list: "/hy/processUdgetPlan/getPlanTable",
+          queryPlanApply:'/word/queryPlanApply'
         },
         Wslist: null,
       }
@@ -74,39 +72,52 @@
       // this.sendMesFroIframe();
     },
     created() {
-      this.sendMesFroIframe();
+      this.goPreview();
       // this.loadData();
     },
     activated() {
-      this.sendMesFroIframe();
+
     },
     beforeMount() {
 
+    },
+    computed: {
+      importExcelUrl: function(){
+        return `${window._CONFIG['domianURL']}/${this.url.queryPlanApply}`;
+      }
     },
     methods:{
-      //方法：
-      async sendMesFroIframe() {
-        await this.loadData();
-        let a = this.Wslist
-        console.log("执行了>>>>>>>>>>>>>>>>>>>>>>>",a);
-
-
-        const mapFrame = this.$refs['iframes']
-        if (mapFrame.attachEvent) { // 兼容浏览器判断
-          mapFrame.attachEvent('onload', function() {
-            const iframeWin = mapFrame.contentWindow
-            iframeWin.postMessage(a, '*')
-            // data传递的参数   *写成子页面的域名或者是ip
-          })
-        } else {
-          mapFrame.onload = function() {
-            const iframeWin = mapFrame.contentWindow
-            iframeWin.postMessage(a, '*')
-          }
-        }
-
+      // //方法：
+      // async sendMesFroIframe() {
+      //   await this.loadData();
+      //   let a = this.Wslist
+      //   console.log("执行了>>>>>>>>>>>>>>>>>>>>>>>",this.queryParam);
+      //
+      //
+      //   const mapFrame = this.$refs['iframes']
+      //   if (mapFrame.attachEvent) { // 兼容浏览器判断
+      //     mapFrame.attachEvent('onload', function() {
+      //       const iframeWin = mapFrame.contentWindow
+      //       iframeWin.postMessage(a, '*')
+      //       // data传递的参数   *写成子页面的域名或者是ip
+      //     })
+      //   } else {
+      //     mapFrame.onload = function() {
+      //       const iframeWin = mapFrame.contentWindow
+      //       iframeWin.postMessage(a, '*')
+      //     }
+      //   }
+      //
+      // },
+      // 预览
+      goPreview() {
+        downFile('/word/queryPlanApply', {id:this.queryParam.id  }).then((data) => {
+          console.log(data)
+          docx.renderAsync(data,this.$refs.file)
+        })
       },
 
+
       loadData()  {
         return new Promise((resolve, reject) => {
           if(!this.url.list){
@@ -135,6 +146,11 @@
 </script>
 
 <style scoped>
+  .docWrap {
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+  }
   .iframe {
 
     position: absolute;