修改 采购通知书的下载预览打印方式

.env.development

@@ -1,4 +1,4 @@
 NODE_ENV=development
 VUE_APP_API_BASE_URL=http://localhost:9566/hy-boot
 VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
-VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
+VUE_APP_ONLINE_BASE_URL=http://182.92.73.21:8012/onlinePreview?url=

package.json

@@ -42,6 +42,7 @@
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
     "vue-pdf": "^4.2.0",
+    "vue-pdf-signature": "^4.2.7",
     "vue-photo-preview": "^1.1.3",
     "vue-print-nb-jeecg": "^1.0.9",
     "vue-router": "^3.0.1",

src/views/accessrecords/statement/ProcessMaterialsPlanStatement.vue

@@ -1,24 +1,10 @@
 <template>
-  <div >
+  <div>
+    <a-button type="primary" icon="download" @click="downWord">下载</a-button>
+    <a-button type="primary" style="left: 10px" @click="previewWord">预览并打印</a-button>
 
-<!--      <div style="width: 100%;height: 100%">
+    <div style="width: 100%;height: 100%;">
-
+      <pdf ref="pdfWord" :src="pdfSrc" class="pdf" style=""></pdf>
-        <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>
 
@@ -29,14 +15,17 @@
   import pick from 'lodash.pick'
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import { getAction,downFile} from '@/api/manage';
+  import { getAction, downFile } from '@/api/manage'
-  let docx = require("docx-preview");
+  import pdf from 'vue-pdf-signature'
+  import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'
+
   export default {
-    name: "ProcessMaterialPlan",
+    name: 'ProcessMaterialPlan',
-    mixins:[JeecgListMixin,mixinDevice],
+    mixins: [JeecgListMixin, mixinDevice],
-    props:{
+    components: { pdf, CMapReaderFactory },
-      materWared:{
+    props: {
-        type: String,
+      materWared: {
+        type: String
       },
       /**/
       procInstId: {
@@ -55,24 +44,30 @@
       }
     },
 
-    data(){
+    data() {
-      return{
+      return {
-        showSessionId : '',
+        showSessionId: '',
-        srcHtml : '',
+        srcHtml: '',
-        url:{
+        modalLsVisible: false,
-          list: "/hy/processUdgetPlan/getPlanTable",
+        pdfWord: '',
-          queryPlanApply:'/word/queryPlanApply'
+        pdfSrc: '',
+        url: {
+          list: '/hy/processUdgetPlan/getPlanTable',
+          queryPlandDownWord: '/word/queryPlandDownWord',
+          queryPlanPrevie: '/word/queryPlanPrevie'
         },
-        Wslist: null,
+        Wslist: null
       }
     },
     mounted() {
-      this.showSessionId = window.location.search;
+      this.showSessionId = window.location.search
-      this.srcHtml = '../static/采购申请表.html';
-      // this.sendMesFroIframe();
     },
     created() {
-      this.goPreview();
+     /* downFile(this.url.queryPlanPrevie, { id: this.queryParam.id }).then((data) => {
+        console.log(data)
+        const blob = new Blob([data], { type: 'application/pdf' })
+        this.pdfWord = window.URL.createObjectURL(blob)
+      })*/
       // this.loadData();
     },
     activated() {
@@ -82,85 +77,43 @@
 
     },
     computed: {
-      importExcelUrl: function(){
+      importExcelUrl: function() {
-        return `${window._CONFIG['domianURL']}/${this.url.queryPlanApply}`;
+        return `${window._CONFIG['domianURL']}/${this.url.queryPlanApply}`
       }
     },
-    methods:{
+    methods: {
-      // //方法：
+      // 下载
-      // async sendMesFroIframe() {
+      downWord() {
-      //   await this.loadData();
+        downFile(this.url.queryPlandDownWord, { id: this.queryParam.id }).then((data) => {
-      //   let a = this.Wslist
+          const blob = new Blob([data]) // 把得到的结果用流对象转一下
-      //   console.log("执行了>>>>>>>>>>>>>>>>>>>>>>>",this.queryParam);
+          var a = document.createElement('a') //创建一个<a></a>标签
-      //
+          a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
-      //
+          a.download = '采购通知书.docx' //设置文件名
-      //   const mapFrame = this.$refs['iframes']
+          a.style.display = 'none' // 障眼法藏起来a标签
-      //   if (mapFrame.attachEvent) { // 兼容浏览器判断
+          document.body.appendChild(a) // 将a标签追加到文档对象中
-      //     mapFrame.attachEvent('onload', function() {
+          a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
-      //       const iframeWin = mapFrame.contentWindow
+          a.remove()
-      //       iframeWin.postMessage(a, '*')
+        })
-      //       // data传递的参数   *写成子页面的域名或者是ip
+
-      //     })
+      },
-      //   } else {
+      previewWord() {
-      //     mapFrame.onload = function() {
+        downFile(this.url.queryPlanPrevie, { id: this.queryParam.id }).then((data) => {
-      //       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)
+          const blob = new Blob([data], { type: 'application/pdf' })
+          this.pdfSrc = window.URL.createObjectURL(blob)
+          console.log(this.pdfSrc)
+          window.open(this.pdfSrc)//新窗口打开，借用浏览器去打印
         })
       },
-
-
       loadData() {
-        return new Promise((resolve, reject) => {
+        this.queryParam.id = this.materWared
-          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>
+<style lang="less" 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>