1.安装依赖包(如果项目版本不符则需要在结尾加--legacy-peer-deps)
npm install docxtemplater pizzip -S
npm install jszip-utils -S
npm install pizzip -S
npm install file-saver --save
2.在需要使用依赖的vue页面引入依赖
3.定义数据,可以定义对象或者数组对象(笔者这里定义了一个对象)
4.之后定义方法进行导出word功能
// 导出并下载word文档
downloadprice(){
let _this = this;
// 判断有无附加商品来选择word模版
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent('/expore.docx', function(error, content) {
console.log('-----', content);
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
// 导出打印表全部信息
..._this.printData,
});
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, _this.printData.time + '111.docx');
});
},
注意:..._this.printData,对应的是上面定义的对象的数据,
刚才说过也可以定义数组对象,示例:
//定义的数组对象
table:[{
name:"张三"，
value:"111"
}，{
name:"李四",
value:"222"
}]
那么在这个地方如果想要引用我们声明的数组变量的话
我们就要在..._this.printData后面加上
// 设置模板变量的值
doc.setData({
//导出打印表全部信息
...this.printData,
table
})
5.之所以把前面的导出word放在前面写是因为怕这里的模板一些人看着迷糊,接下来我们创建一个.docx模板(笔者这里只用过.docx为后缀的模板,如果你们有兴趣的话可以试试其他的)
注意:.docx模板只能一开始创建的时候就是.docx模板,如果你一开始创建的是.doc模板后边修改为.docx模板的话可能会有问题,这个时候你可以重新创建一个.docx文件作为新的模板.
首先我们声明的数据为
之后我们导出了声明的变量作为word模板的数据,(可能不懂为啥要...转换,因为导出到word模板中的数据这里要求为数组格式所以用...运算符进行转换成数组)
然后我们的word模板要这么写
如上图，咱们就可以将咱们想要在表格里面显示的数据用{}括起来然后显示到表格里
但是上面咱们还说了，还有一种数据类型就是数组对象的数据类型，这里以tabel为例
在这种情况下我们的模板想要显示tabel的数据值就需要
注意:这里{#table}为表格的开头,{/table}为表格的结尾,其中的数据具体怎么显示的请各位试一试,因为笔者没有用到数组对象数据,所以暂未尝试。
6.到这里来说应该就是最后一步了，我们需要把我们所创建的(自定义文件名).docx的word模板放到指定文件夹里面(笔者这里研究了一天)，刚开始总是路径不对,看网上说都是vue2放在static文件夹vue3放在public文件夹,但是还是不行，所以笔者自己试了又试,结果自己是vue2项目但是放在public文件夹(与src同级)之后就好使了,不要在意static那是笔者自己创的文件夹
之后在这个地方写上/+(你自己的模板名称就大功告成了)
7.如果有什么不会不全面或者看不懂错误的地方可以给笔者留言评论或者私信奥，(笔者看到了会回复或者修改的),感谢观看！
