vue导出word,使用docxtemplater中角度解析器踩坑记
关于如何在vue中使用word模板导出数据,可以参考我之前的这个文章在vue中导出word_ZMJ_QQ的博客-CSDN博客这个主要是记录如何在word模板中写条件判断和使用$indexdocxtemplater文档参考Angular parser | docxtemplater如果要在word模板中使用角度解析器,那么在word导出的方法中一定要添加上这一段代码(踩了两次坑,都是没有添加上这一段
·
关于如何在vue中使用word模板导出数据,可以参考我之前的这个文章在vue中导出word_ZMJ_QQ的博客-CSDN博客
这个主要是记录如何在word模板中写条件判断和使用$index
- docxtemplater文档参考Angular parser | docxtemplater
如果要在word模板中使用角度解析器,那么在word导出的方法中一定要添加上这一段代码(踩了两次坑,都是没有添加上这一段代码,浪费了半天的时间) ,文档有代码示例。
在导出word的方法中添加setOptions({ parser: angularParser })
let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser });
如果还要使用$index显示数组的索引,需要添加这几行代码
使用if判断条件
{#topicType == "单选"} .... {/}
显示序号,可以在索引值上加1 {$index + 1}
:)运算符前后要留一个空格
完整代码
async exportWord() {
// 传故障树id
const loading = this.$loading({
lock: true,
text: '正在生成word',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 获取数据
let res = await getWordData(this.saveTreeId);
let list = res.data.data.middleDTO;
var expressions = require("angular-expressions");
var assign = require("lodash/assign");
var last = require("lodash/last");
// define your filter functions here, for example
// to be able to write {clientname | lower}
expressions.filters.lower = function (input) {
// This condition should be used to make sure that if your input is
// undefined, your output will be undefined as well and will not
// throw an error
if (!input) return input;
return input.toLowerCase();
};
function angularParser(tag) {
tag = tag
.replace(/^\.$/, "this")
.replace(/(’|‘)/g, "'")
.replace(/(“|”)/g, '"');
const expr = expressions.compile(tag);
return {
get: function (scope, context) {
let obj = {};
const index = last(context.scopePathItem);
const scopeList = context.scopeList;
const num = context.num;
for (let i = 0, len = num + 1; i < len; i++) {
obj = assign(obj, scopeList[i]);
}
obj = assign(obj, { $index: index });
return expr(scope, obj);
},
};
}
let _this = this;
let form = {
title: _this.currentTitle,
ctitle: _this.comList.commonSubject,
ctopic: _this.comList.topic,
s: list,
};
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("worktable.docx", (error, content) => {
// input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
this.$message.error("导出word文档失败!")
loading.close()
throw error;
}
// 创建一个JSZip实例,内容为模板的内容
// let zip = new JSZip(content);
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
// let doc = new window.docxtemplater().loadZip(zip);
let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser });
// 设置模板变量的值
doc.setData({
...form,
});
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 }));
this.$message.error("导出word文档失败!")
loading.close()
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, "现场调查通知书.docx");
loading.close()
});
},
更多推荐
已为社区贡献9条内容
所有评论(0)