修改前端页面

kongdeqiang

2023-09-12 b6809f71253a524d81c086ef1293acafdaba395e

 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 [70,40]
          }
        }

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