操作步骤
1、安装插件
-- 安装 docxtemplater
cnpm install docxtemplater pizzip --save
-- 安装 jszip-utils
cnpm install jszip-utils --save
-- 安装 jszip
cnpm install jszip --save
-- 安装 FileSaver
cnpm install file-saver --save
2、在需要的组件中引入
import jszip from 'jszip'
import jszip_utilsfrom 'jszip-utils'
import docxtemplater from 'docxtemplater'
import FileSaver from 'file-saver'
3、创建模板文件
首先创建一个模板文件，事先定义好格式和内容。docxtemplater 之前介绍到是通过标签的形式来填充数据的，简单的数据我们可以使用{} + 变量名来实现简单的文本替换。
① 文本替换
定义模板
test {name}
数据定义
{"name":"hello"}
输出效果
test hello
② 循环输出
定义模板
{#table}
{name},{age}
{/table}
定义数据
{
"data":[
{"name":"张三","age":18},
{"name":"李祀","age":28},
]
}
输出效果
张三，18
李祀，28
ps：使用时将data对应的数据赋值给table
pps：整体循环输出多张表格时，将循环的位置设置在表格之外，示例如下
将写好的模板放在目录下，笔者放在public/outsideExample.docx下
4、使用
①读取模板内容
②装载到zip对象中
③设置文件数据
④生成文件
⑤保存文件
代码：
jszip_utils.getBinaryContent("outsideExample.docx",function(error, content) {
// outsideExample.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
var zip =new jszip(content);
// 创建并加载docxtemplater实例对象
var doc =new window.docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
table:data
})
try {
// 用模板变量的值替换所有模板变量
doc.render();
}catch (error) {
// 抛出异常
var e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(JSON.stringify({error:e }));
throw error;
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
var out =doc.getZip().generate({
type:"blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件，并命名
FileSaver.saveAs(out,"文件名.docx");
});
9-4 更新
模板定义中判断语句的写法：{#name}{name}{/name}
