1 public下面新建word文档,填入Hi {nickName},nickName是字段名称,在需要导出word文档的界面定义
obj:{
nickName:"师太"
}
2 安装命令
npm install docxtemplater pizzip
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save
3 在需要导出word文档的页面引入
import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
4 编写点击事件
let _this = this;
//1.docx,要和自己定义的文档名称保持一致
JSZipUtils.getBinaryContent('1.docx', function(error, content) {
// input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例,内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater();
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({..._this.obj,});
// 用模板变量的值替换所有模板变量
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'
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, _this.obj.nickName + '的简介.docx');
});