-
安装依赖
-- 安装 docxtemplater cnpm install docxtemplater pizzip --save -- 安装 jszip-utils cnpm install jszip-utils --save -- 安装 jszip cnpm install jszip --save -- 安装 FileSaver cnpm install file-saver --save
-
引入依赖包
import docxtemplater from "docxtemplater"; import PizZip from "pizzip"; import JSZipUtils from "jszip-utils"; import { saveAs } from "file-saver";
-
创建word模板文件
-
导出word文件
downLoadWord(detailData) { let docxSrc = "/(模板文件名).docx";//模板文件的路径 let docxName = "(导出文件名).docx";//导出文件的名字 // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(docxSrc, function (error, content) { if (error) { console.log(JSON.stringify(error.message)); return; } let zip = new PizZip(content); let doc = new docxtemplater().loadZip(zip); // 设置模板变量的值 doc.setData({ ...detailData, name: detailData.name, age: detailData.age, address: detailData.address, }); 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); }); }
-
保存结果
注意:
- 模板文件推荐放在静态目录文件下。
- 使用vue-cli2的时候,放在static目录下,使用vue-cli3的时候,放在public目录下。