纯前端vue利⽤docxtemplater实现⽣成word⽂档下载word模板,勾选框的默。
。。
⾸先需要下载如下⼯具:
cnpm i docxtemplater pizzip jszip-utils file-saver -S
然后将它们引⼊:
import JSZipUtils from"jszip-utils";
import"docxtemplater/build/docxtemplater.js";
import"pizzip/dist/pizzip.js";
import"file-saver";
以下是实现⽅法:
exportWord(){
let _this =this;
if(error){
<(error);
return;
}
let opts ={};
let zip =new PizZip(content);
let doc =new docxtemplater().loadZip(zip);
doc.setData({
title:"word⽂档下载demo",
table: _this.checklist,
multi: _this.chanquan_list_2,
});
var out = Zip().generate({
type:"blob",
mimeType:
模板王怎么下载字体"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
saveAs(out,"demo.docx");
});
}
对于cli3项⽬,word模板放到public⽬录下:
在此处向word模板传值:
word模板:
{}⾥写key值,
{#array}表⽰循环开始,{/array}表⽰循环结束,array为被循环的数组。
其中,默认选中勾选框的⽅法:
1.在⽂本中插⼊该符号,将其复制到json中对应的value值⾥(对从接⼝获取到的json做⼀步处理),由于此符号字体是Wingdings 2,所以模板中对应的key值也应设成相同字体,
这样就能实现默认选中啦。
补充⼀下:
⽐如数据是这样的: [{name:选项⼀,checked:true},{name:选项⼆,checked:false}],⽤word⾥复
制来的勾选框换掉true,没勾选的框换掉false,word⾥⾯的格式是:{#multi}{checked}{name}{/multi} ,然后选中{checked}换成Wingdings 2字体(所以就出现了那⼀堆数字)另(好像Calibri字体也可以)
⽣成的word⽂档:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论