hy-vue/src/views/accessrecords/statement/ProcessMaterialsPlanStatement.vue

<template>
  <div >

<!--      <div style="width: 100%;height: 100%">

        <iframe class="iframe"
                :src="srcHtml"
                frameborder="0"
                ref="iframes"
                style="width: 100%;height: 100%"
        >

        </iframe>
      </div>-->
      <button @click="goPreview">点击预览word文件</button>



    <div class="docWrap">
      <!-- 预览文件的地方（用于渲染） -->
      <div ref="file"></div>
    </div>
  </div>

</template>

<script>
  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],
    props:{
      materWared:{
        type: String,
      },
      /**/
      procInstId: {
        type: String,
        default: '',
        required: false
      },
      pictureId: {
        type: String,
        default: '',
        required: false
      },
      lcModa: {
        type: Object,
        required: false
      }
    },

    data(){
      return{
        showSessionId : '',
        srcHtml : '',
        url:{
          list: "/hy/processUdgetPlan/getPlanTable",
          queryPlanApply:'/word/queryPlanApply'
        },
        Wslist: null,
      }
    },
    mounted() {
      this.showSessionId = window.location.search;
      this.srcHtml = '../static/采购申请表.html';
      // this.sendMesFroIframe();
    },
    created() {
      this.goPreview();
      // this.loadData();
    },
    activated() {

    },
    beforeMount() {

    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.queryPlanApply}`;
      }
    },
    methods:{
      // //方法：
      // 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){
            this.$message.error("请设置url.list属性!")
            return
          }
          console.log("KLJKLJKLJKLJKL",this.materWared);
          this.queryParam.id = this.materWared;
          getAction(this.url.list, this.queryParam).then((res) => {
            console.log(res);
            if (res.success) {
              this.Wslist = res.result;
              console.log("this.Wslist>>>>>>>>>>>>>>>>>>>>>>>>>>>>", res.result)
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
            this.loading = false;
            resolve( this.Wslist );
          })

        })
      },
    }
  }
</script>

<style scoped>
  .docWrap {
    width: 100%;
    height: 100%;
    overflow-x: auto;
  }
  .iframe {

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: hidden;
  }
</style>