纯前端生成word包含echarts和table

使用docxtemplater生成word，包含表格和echarts图表
首先要加载一下依赖
– 安装 docxtemplater

cnpm install docxtemplater pizzip  --save

– 安装 jszip-utils

cnpm install jszip-utils --save 

– 安装 FileSaver

cnpm install file-saver --save

import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JszipUtil from 'jszip-utils'
import FileSave from 'file-saver'
import echarts from "echarts"
import ImageModule from 'docxtemplater-image-module-free'

1、表格

JszipUtil.getBinaryContent('/static/outputAllValue.docx', (error, content) => {
    
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip)
        doc.attachModule(imageModule)
         // 设置模板变量的值
        doc.setData({
        	table:  [            
		          {   id: 1,
		              name:"小米",
		              age: 18
		          },
		          {
		              id: 2,
		              name:"小张",
		              age:22
		          }
		      ]
        })
        // 用模板变量的值替换所有模板变量
        doc.render()
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        FileSave(out, 'demo.docx')
      })

2、生成echarts

// 制作echarts
 var div = document.createElement("div");
    div.setAttribute("style", "width: 300px;height:200px;");
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
      }]
    };
    let myChart = echarts.init(div);
    myChart.setOption(option);

/**
 * base64转为ArrayBuffer
 */
 export 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;
}

	let opts = {
            centered: false,
            fileType: "docx"
        }
        opts.getImage = function (tagValue) {
            if (tagValue.size && tagValue.data) {
              return base64DataURLToArrayBuffer(tagValue.data);
            }
            return base64DataURLToArrayBuffer(tagValue);
        };
        opts.getSize = function (_, tagValue) {
            if (tagValue.size && tagValue.data) {
                return tagValue.size;
            }
            return [400, 400];
        };

// 设置填充内容
        doc.setData({
            image: myChart.getDataURL({
                pixelRatio: 5,//导出的图片分辨率比率,默认是1
                backgroundColor: '#fff',//图表背景色
                excludeComponents: [ 'toolbox'],//忽略组件的列表
                type: 'png',//图片类型支持png和jpeg
            }),
        })

在模板中使用{%%image}

完整代码

import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import JszipUtils from 'jszip-utils'
import FileSave from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
import echarts from "echarts"

/**
 * base64转为ArrayBuffer
 */
 export 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;
}

/**
 * 导出word主函数
 */
 export function exportWord  (fileDocx, datas, outName) {
    //  echarts图表
    var div = document.createElement("div");
    div.setAttribute("style", "width: 300px;height:200px;");
    let option = {
      xAxis: {
        type: 'category',
        data: datas.e.a
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: datas.e.b,
          type: 'line'
      }]
    };
    let myChart = echarts.init(div);
    myChart.setOption(option);
    // 自定义 解析器 ,可以实现复杂的运算 以及过滤功能, 暂时项目只用到 取二维数组功能,用于解析aaa[0][0]之类的模版用
    function parser(tag) {
        var expressions = require("angular-expressions");
        return {
          get: tag === '.' ? function(s){ return s;} : function(s) {
            return expressions.compile(tag.replace(/(’|“|”)/g, "'"))(s);
          }
        };
      }
    
    // 将文件转为二进制
    JszipUtils.getBinaryContent(fileDocx, function(err, res) {
        if (err) { throw err}
        let opts = {
            centered: false,
            fileType: "docx"
        }
        opts.getImage = function (tagValue) {
            if (tagValue.size && tagValue.data) {
              return base64DataURLToArrayBuffer(tagValue.data);
            }
            return base64DataURLToArrayBuffer(tagValue);
        };
        opts.getSize = function (_, tagValue) {
            if (tagValue.size && tagValue.data) {
                return tagValue.size;
            }
            return [400, 400];
        };
        // 将文件转为zip文件
        let pizZip = new PizZip(res)
        // 创建Docxtemplater对象实例并添加zip文件
        let doc = new Docxtemplater()
        doc.loadZip(pizZip)
        doc.setOptions({
            nullGetter: function () { //设置空值 undefined 为""
                return "";
            },
            parser: parser,//加载自定义解析器
         });
        doc.attachModule(new ImageModule(opts));
        // 设置填充内容
        let a = {
            image: myChart.getDataURL({
                pixelRatio: 5,//导出的图片分辨率比率,默认是1
                backgroundColor: '#fff',//图表背景色
                excludeComponents: [ 'toolbox'],//忽略组件的列表
                type: 'png',//图片类型支持png和jpeg
            }),
            table: datas.table
        }
        doc.setData(a)
        // 进行内容填充
        try {
            doc.render()
        } catch (error) {
            // 抛出异常
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
            };
            throw error;
        }
        // 获取要下载的文件
        let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 进行下载
           FileSave(out, outName)
        
    })
}