From de3fd59e158b4f905afa8b32019f11196d5625d5 Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期三, 05 七月 2023 15:38:27 +0800
Subject: [PATCH] 修改前端页面

---
 src/components/page/ticket/word-view/index.vue |   53 ++++++
 src/libs/word.js                               |  385 +++++++++++++++++++++++++++++++++++++++++++++--
 vue.config.js                                  |    6 
 src/components/page/ticket/ticket-form2.vue    |    8 +
 public/words/administratorReturn.docx          |    0 
 5 files changed, 425 insertions(+), 27 deletions(-)

diff --git a/public/words/administratorReturn.docx b/public/words/administratorReturn.docx
index 44ee883..5181e4c 100644
--- a/public/words/administratorReturn.docx
+++ b/public/words/administratorReturn.docx
Binary files differ
diff --git a/src/components/page/ticket/ticket-form2.vue b/src/components/page/ticket/ticket-form2.vue
index ced0579..97219fe 100644
--- a/src/components/page/ticket/ticket-form2.vue
+++ b/src/components/page/ticket/ticket-form2.vue
@@ -130,6 +130,14 @@
   }
 </style>
 <style lang="scss" scoped>
+::v-deep{
+
+  .el-dialog{
+    max-height: 90%;
+    overflow-y: auto;
+    margin-top: 6vh!important;
+  }
+}
   .flexDate{
     display: flex;
     span{
diff --git a/src/components/page/ticket/word-view/index.vue b/src/components/page/ticket/word-view/index.vue
index 9266fd5..8dc6000 100644
--- a/src/components/page/ticket/word-view/index.vue
+++ b/src/components/page/ticket/word-view/index.vue
@@ -9,20 +9,63 @@
 </template>
 
 <script>
-    import {viewD} from '../../../../libs/word'
+import {viewD, viewWithImg,urlToBase64} from '../../../../libs/word'
     export default {
         name: "index",
         data() {
             return {
                 dialogVisible: false,
+               imgSize:{
+                 shouQianMing:[60,60]
+               }
+
             }
         },
         methods: {
+          initMore3(obj,url,arry,imgSize) {  //椤甸潰鏈夊寮犵鍚嶇収鐗囩殑涓斾竴澶勫彲鏈夊寮犲浘鐗�
+            if(arry.length > 0) {
+              if(obj) {
+                for(let j = 0;j<arry.length;j++) {
+                  if(Array.isArray(arry[j])){
+                    let img = obj[arry[j]].split(',')
+                    let imgList = []
+                    for (let i=0; i< img.length; i++) {
+                      urlToBase64(img[i],function(baseStr) {
+                        img[i] = baseStr;
+                        imgList.push({
+                          img: img[i]
+                        })
+                        // imgList.push({
+                        //     src:img[i]
+                        // })
+                      })
+                      this.$set(obj,`${arry[j]}List`,imgList)
+                    }
+                  }else {
+                    console.log(obj[arry[j]],'imgiiiiiii===')
+                    urlToBase64(obj[arry[j]], function(baseStr) {
+                      alert(22)
+                      console.log(baseStr,'baseStr=======')
+                      obj[arry[j]] = baseStr
+                      //that.$set(obj,arry[i],obj[arry[i]])
+                    })
+                  }
+                }
+
+              }
+
+              setTimeout(() => {
+                viewWithImg(obj,url,this.$refs.word,imgSize);
+              },3000)
+            }
+
+
+          },
             initWord(data,url) {
                 this.dialogVisible = true
-                setTimeout(() => {
-                    viewD(data,url,this.$refs.word)
-                },1000)
+              setTimeout(() => {
+                viewWithImg(data,url,this.$refs.word,this.imgSize);
+              },1000)
             }
         }
     }
@@ -40,7 +83,7 @@
 
 </style>
 <style lang="scss" scoped>
-  :v-deep{
+  ::v-deep{
 
   }
 </style>
diff --git a/src/libs/word.js b/src/libs/word.js
index 8990427..830a592 100644
--- a/src/libs/word.js
+++ b/src/libs/word.js
@@ -1,37 +1,128 @@
-import PizZip from 'pizzip'
 import docxtemplater from 'docxtemplater'
+import PizZip from 'pizzip'
 import JSZipUtils from 'jszip-utils'
-import { saveAs } from 'file-saver'
+import {saveAs} from 'file-saver'
 let docx = require("docx-preview");
 const ImageModule = require("docxtemplater-image-module-free");
 
+const base64Regex =
+    /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
+
 //涓嬭浇word锛屼笉甯﹀浘鐗�
-export const exportDoc = (e,path,dname) => {
-  for(let i in e) {
-    if(e[i] == null) {
-      e[i] = ''
+export const exportDoc = (e, path , dname) => {
+    for (let attr in e) {
+        if (e[attr] == null) {
+            e[attr] = "";
+        }
+    }
+    let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
+    let docxname = dname;        //瀵煎嚭鏂囦欢鐨勫悕瀛�
+    // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹�
+    JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
+        // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
+        // 鎶涘嚭寮傚父
+        if (error) {
+            throw error;
+        }
+
+        // 鍒涘缓涓�涓狿izZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
+        let zip = new PizZip(content);
+        // 鍒涘缓骞跺姞杞絛ocx templater瀹炰緥瀵硅薄
+        let doc = new docxtemplater().loadZip(zip);
+        // 璁剧疆妯℃澘鍙橀噺鐨勫��
+        doc.setData(e);
+
+        try {
+            //鏇挎崲鎵�鏈夋ā鏉垮彉閲�
+            doc.render();
+        } catch (error) {
+            let e = {
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                properties: error.properties
+            };
+            console.log(JSON.stringify({error: e}));
+            throw error;
+        }
+
+        // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級
+        let out = doc.getZip().generate({
+            type: "blob",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+        });
+        // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚�
+        saveAs(out, docxname);
+    });
+};
+
+//涓嬭浇word锛屽甫鍥剧墖
+export const exportDocWidthImg = (e, path , dname, imgSize) => {
+  for (let attr in e) {
+    if (e[attr] == null) {
+      e[attr] = "";
     }
   }
   let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
   let docxname = dname;        //瀵煎嚭鏂囦欢鐨勫悕瀛�
   // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹�
-  JSZipUtils.getBinaryContent(docxsrc,function (error, content) {
-    if (error) throw error // 鎶涘嚭寮傚父
-    let zip = new PizZip(content) // 鍒涘缓涓�涓狫SZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
-    let doc = new docxtemplater().loadZip(zip) // 鍒涘缓骞跺姞杞絛ocxtemplater瀹炰緥瀵硅薄
-    doc.setData(e)  // 璁剧疆妯℃澘鍙橀噺鐨勫��
+  JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
+    // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
+    // 鎶涘嚭寮傚父
+    if (error) {
+      throw error;
+    }
+
+    // 鍒涘缓涓�涓狿izZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
+    let zip = new PizZip(content);
+    // 鍒涘缓骞跺姞杞絛ocx templater瀹炰緥瀵硅薄
+    let doc = new docxtemplater().loadZip(zip).setOptions({
+      linebreaks:true,
+      paragraphLoop: true,
+      nullGetter:function () {
+        return ""
+      }
+    });
+
+    // // 鍥剧墖澶勭悊
+    let opts = {}
+    opts = {
+      // 鍥惧儚鏄惁灞呬腑
+      centered: false
+    };
+    opts.fileType = "docx";
+    opts.getImage = (chartId) =>{
+      return base64DataURLToArrayBuffer(chartId);
+    }
+
+    opts.getSize = function(img, tagVlaue, tagName){  //鍥剧墖size
+      if(imgSize.hasOwnProperty(tagName)) {
+        return imgSize[tagName]
+      }else {
+        return [300,300]
+      }
+    }
+    let imageModule = new ImageModule(opts);
+    doc.attachModule(imageModule);
+
+    // 璁剧疆妯℃澘鍙橀噺鐨勫��
+    doc.setData(e);
+    console.log(doc,'涓嬭浇---甯﹀浘鐗囩殑---')
+
     try {
-      doc.render() // 鐢ㄦā鏉垮彉閲忕殑鍊兼浛鎹㈡墍鏈夋ā鏉垮彉閲�
-    } catch(error) {
+      //鏇挎崲鎵�鏈夋ā鏉垮彉閲�
+      doc.render();
+    } catch (error) {
       let e = {
         message: error.message,
         name: error.name,
         stack: error.stack,
         properties: error.properties
-      }
-      console.log(JSON.stringify({ error: e }))
-      throw error // 鎶涘嚭寮傚父
+      };
+      console.log(JSON.stringify({error: e}));
+      throw error;
     }
+
     // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級
     let out = doc.getZip().generate({
       type: "blob",
@@ -39,17 +130,18 @@
     });
     // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚�
     saveAs(out, docxname);
-  })
+  },2000);
 }
 
-//棰勮word锛屼笉甯﹀浘鐗囩殑
-export const viewD = (e, path , continer) => {
+//涓嬭浇word锛屽甫鍥剧墖
+export const exportDocWidthImg2 = (e, path , dname, arry, imgSize) => {
   for (let attr in e) {
     if (e[attr] == null) {
       e[attr] = "";
     }
   }
   let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
+  let docxname = dname;        //瀵煎嚭鏂囦欢鐨勫悕瀛�
   // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹�
   JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
     // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
@@ -62,6 +154,24 @@
     let zip = new PizZip(content);
     // 鍒涘缓骞跺姞杞絛ocx templater瀹炰緥瀵硅薄
     let doc = new docxtemplater().loadZip(zip);
+
+    // // 鍥剧墖澶勭悊
+    const opts = {}
+    opts.fileType = "docx";
+    opts.getImage = (chartId) =>{
+      return base64DataURLToArrayBuffer(chartId);
+    }
+
+    opts.getSize = function(img, tagVlaue, tagName){  //鍥剧墖size
+      if(imgSize.hasOwnProperty(tagName)) {
+        return imgSize[tagName]
+      }else {
+        return [300,300]
+      }
+    }
+    let imageModule = new ImageModule(opts);
+    doc.attachModule(imageModule);
+
     // 璁剧疆妯℃澘鍙橀噺鐨勫��
     doc.setData(e);
 
@@ -84,6 +194,243 @@
       type: "blob",
       mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
     });
+    // 灏嗙洰鏍囨枃浠跺璞′繚瀛樹负鐩爣绫诲瀷鐨勬枃浠讹紝骞跺懡鍚�
+    saveAs(out, docxname);
+  },2000);
+}
+
+//棰勮word锛屼笉甯﹀浘鐗囩殑
+export const viewD = (e, path , continer) => {
+    for (let attr in e) {
+        if (e[attr] == null) {
+            e[attr] = "";
+        }
+    }
+    let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
+    // 璇诲彇骞惰幏寰楁ā鏉挎枃浠剁殑浜岃繘鍒跺唴瀹�
+    JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
+        // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
+        // 鎶涘嚭寮傚父
+        if (error) {
+            throw error;
+        }
+
+        // 鍒涘缓涓�涓狿izZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
+        let zip = new PizZip(content);
+        // 鍒涘缓骞跺姞杞絛ocx templater瀹炰緥瀵硅薄
+        let doc = new docxtemplater().loadZip(zip);
+        // 璁剧疆妯℃澘鍙橀噺鐨勫��
+        doc.setData(e);
+
+        try {
+            //鏇挎崲鎵�鏈夋ā鏉垮彉閲�
+            doc.render();
+        } catch (error) {
+            let e = {
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                properties: error.properties
+            };
+            throw error;
+        }
+
+        // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級
+        let out = doc.getZip().generate({
+            type: "blob",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+        });
+        docx.renderAsync(out, continer); // 娓叉煋鍒伴〉闈㈤瑙�
+    });
+};
+
+//棰勮甯﹀浘鐗囩殑word
+export const viewWithImg = (e, path , continer, imgSize) => {
+    for (let attr in e) {
+        if (e[attr] == null) {
+            e[attr] = "";
+        }
+    }
+    let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
+    JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
+        // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
+        // 鎶涘嚭寮傚父
+        if (error) {
+            throw error;
+        }
+
+        const doc = new docxtemplater();
+        // // 鍒涘缓涓�涓狿izZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
+        const zip = new PizZip(content);
+        doc.loadZip(zip)
+        // // 鍥剧墖澶勭悊
+        const opts = {}
+        //opts.centered = true;
+        opts.fileType = "docx";
+        opts.getImage = (chartId) =>{
+            return base64DataURLToArrayBuffer(chartId);
+        }
+
+        opts.getSize = function(img, tagVlaue, tagName){  //鍥剧墖size
+          if(imgSize.hasOwnProperty(tagName)) {
+            return imgSize[tagName]
+          }else {
+            return [300,300]
+          }
+        }
+
+        let imageModule = new ImageModule(opts);
+        doc.attachModule(imageModule);
+
+        doc.setData(e);
+        console.log(doc,'棰勮甯﹀浘鐗�====')
+
+        try {
+            //     //鏇挎崲鎵�鏈夋ā鏉垮彉閲�
+            doc.render();
+        } catch (error) {
+            let e = {
+                message: error.message,
+                name: error.name,
+                stack: error.stack,
+                properties: error.properties
+            };
+            console.log(JSON.stringify({error: e}));
+            //     throw error;
+        }
+
+        // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級
+        let out = doc.getZip().generate({
+            type: "blob",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+        });
+        docx.renderAsync(out, continer); // 娓叉煋鍒伴〉闈㈤瑙�
+    });
+};
+
+//棰勮甯︾鍚嶅拰鎸夋墜鍗扮殑word
+export const viewWithImg2 = (e, path , continer, imgSize) => {
+  for (let attr in e) {
+    if (e[attr] == null) {
+      e[attr] = "";
+    }
+  }
+  let docxsrc = path;        //妯℃澘鏂囦欢鐨勪綅缃�
+  JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
+    // docxsrc鏄ā鏉裤�傛垜浠湪瀵煎嚭鐨勬椂鍊欙紝浼氭牴鎹妯℃澘鏉ュ鍑哄搴旂殑鏁版嵁
+    // 鎶涘嚭寮傚父
+    if (error) {
+      throw error;
+    }
+
+    const doc = new docxtemplater();
+    // // 鍒涘缓涓�涓狿izZip瀹炰緥锛屽唴瀹逛负妯℃澘鐨勫唴瀹�
+    const zip = new PizZip(content);
+    doc.loadZip(zip)
+    // // 鍥剧墖澶勭悊
+    const opts = {}
+    //opts.centered = true;
+    opts.fileType = "docx";
+    opts.getImage = (chartId) =>{
+      return base64DataURLToArrayBuffer(chartId);
+    }
+
+    opts.getSize = function(img, tagVlaue, tagName){  //鍥剧墖size
+      if(imgSize.hasOwnProperty(tagName)) {
+        return imgSize[tagName]
+      }else {
+        return [100,100]
+      }
+    }
+
+    let imageModule = new ImageModule(opts);
+    doc.attachModule(imageModule);
+    doc.setData(e);
+
+    try {
+      //     //鏇挎崲鎵�鏈夋ā鏉垮彉閲�
+      doc.render();
+    } catch (error) {
+      let e = {
+        message: error.message,
+        name: error.name,
+        stack: error.stack,
+        properties: error.properties
+      };
+      //     throw error;
+    }
+
+    // 鐢熸垚涓�涓唬琛╠ocxtemplater瀵硅薄鐨剒ip鏂囦欢锛堜笉鏄竴涓湡瀹炵殑鏂囦欢锛岃�屾槸鍦ㄥ唴瀛樹腑鐨勮〃绀猴級
+    let out = doc.getZip().generate({
+      type: "blob",
+      mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+    });
     docx.renderAsync(out, continer); // 娓叉煋鍒伴〉闈㈤瑙�
   });
 };
+
+function base64DataURLToArrayBuffer(dataURL) {
+    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
+    if (!base64Regex.test(dataURL)) {
+        return false;
+    }
+    const stringBase64 = dataURL.replace(base64Regex, "");
+    let binaryString;
+    if (typeof window !== "undefined") {
+        binaryString = window.atob(stringBase64);
+    } else {
+        binaryString = new Buffer(stringBase64, "base64").toString("binary");
+    }
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        const ascii = binaryString.charCodeAt(i);
+        bytes[i] = ascii;
+    }
+    return bytes.buffer;
+}
+
+
+export const urlToBase64 = (url, callback) => {
+  let image = new Image();
+  //瑙ｅ喅璺ㄥ煙闂
+  image.setAttribute('crossOrigin', '*');
+  image.src = url
+  image.onload = () => {
+    var canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    var context = canvas.getContext('2d');
+    context.drawImage(image, 0, 0, image.width, image.height);
+    var quality = 0.8;
+    //杩欓噷鐨刣ataurl灏辨槸base64绫诲瀷
+    var dataURL = canvas.toDataURL("image/png", quality);
+    callback ? callback(dataURL) : null; //璋冪敤鍥炶皟鍑芥暟
+  }
+};
+
+
+function base64Parser(dataURL) {
+    if (
+        typeof dataURL !== "string" ||
+        !base64Regex.test(dataURL)
+    ) {
+        return false;
+    }
+    const stringBase64 = dataURL.replace(base64Regex, "");
+
+    // For nodejs
+    if (typeof Buffer !== "undefined" && Buffer.from) {
+        return Buffer.from(stringBase64, "base64");
+    }
+
+    // For browsers :
+    const binaryString = window.atob(stringBase64);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        const ascii = binaryString.charCodeAt(i);
+        bytes[i] = ascii;
+    }
+    return bytes.buffer;
+}
diff --git a/vue.config.js b/vue.config.js
index b878498..552ad37 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,12 +14,12 @@
         sockHost: 'localhost',
         disableHostCheck: true,
         proxy: {
-            '/api':{
+            '/':{
                 //target:'http://183.196.93.178',
-                target:'http://127.0.0.1',
+                target:'http://127.0.0.1:8089',
                 changeOrigin:true,
                 pathRewrite:{
-                    '/api':''
+                    '/':''
                 }
             }
         }

--
Gitblit v1.9.1