vue2导出word文件
安装依赖
cnpm install --save docxtemplater pizzip jszip-utils file-saver
模板文件(模板文件中使用 {name} ,‘{name}’ 将会被替换成 ‘张三’)
test.docx 放在public目录下(vue2)
导入
import PizZip from "pizzip"; import JSZipUtils from "jszip-utils"; import docxtemplater from "docxtemplater"; import saveAs from "file-saver";
使用 (引入test.docx的时候可以不加 ‘/’,但是有的框架需要‘/’)
print() { // 读取二进制模板文件 JSZipUtils.getBinaryContent("/test.docx", function (error, content) { if (error) { throw error; } let zip = new PizZip(content); // 创建并加载docxtemplater实例对象 let doc = new docxtemplater().loadZip(zip); // 设置模板变量的值 doc.setData({ name: "张三", }); console.log(zip); 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, "报价单.docx"); }); return false; },
模板中对象,和数组的循环 : https://docxtemplater.com/docs/tag-types/#loops
{#list}{name}{/list}
{#obj}{key}{/obj}