纯前端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-s
首先需要下载如下工具:
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;
JSZipUtils.getBinaryContent("demo.docx", (error, content) => {
if (error) {
console.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,
});
doc.render();
var out = doc.getZip().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文档:
引用:https://docxtemplater.readthedocs.io/en/latest/generate.html
更多推荐
所有评论(0)