修改前端页面

kongdeqiang

2023-07-05 de3fd59e158b4f905afa8b32019f11196d5625d5

修改前端页面

 public/words/administratorReturn.docx

Binary files differ

 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{

 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>

 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;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docx 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;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        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) // 创建一个JSZip实例，内容为模板的内容
    let doc = new docxtemplater().loadZip(zip) // 创建并加载docxtemplater实例对象
    doc.setData(e)  // 设置模板变量的值
  JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
    // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
    // 抛出异常
    if (error) {
      throw error;
    }

    // 创建一个PizZip实例，内容为模板的内容
    let zip = new PizZip(content);
    // 创建并加载docx 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;
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    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);
    // 创建并加载docx 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;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docx 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;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        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();
        // // 创建一个PizZip实例，内容为模板的内容
        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;
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        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();
    // // 创建一个PizZip实例，内容为模板的内容
    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;
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    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;
    //这里的dataurl就是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;
}

 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':''
                    '/':''
                }
            }
        }