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

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

// 制作echartsvar 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,//导出的图片分辨率比率,默认是1backgroundColor: '#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,//导出的图片分辨率比率,默认是1backgroundColor: '#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)})
}