前端生成毕业去向质量分析报告docx文档
实现思路
借助Word模板文档,通过替换模板数据的形式来填入毕业去向质量分析数据。
docx模板替换语法
简单字符串替换
在模板中的内容:我是 {var}
。
在前端中定义: var:'123'
生成的docx文档中内容:我是123
数组替换
在模板中的内容:
{#table}
{iterm}
{/table}
在前端中的定义:
table:[{term:'1'},{term:'2'},{term:'3'}]
生成的docx文档中内容:
1
2
3
代码实现(假设前端中定义的替换数据为form中的数据)
安装插件
在前端我们共需要4个插件,docxtemplater,jszip,jszip-utils和file-saver
npm install docxtemplater pizzip --save
npm install jszip@2.6.1
npm install jszip-utils --save
npm install file-saver --save
- docxtemplater是一种邮件合并工具,它以编程方式使用,处理条件、循环,并且可以扩展为表格、HTML、图像等。
- jszip-utils是与jszip一起使用的跨浏览器的工具库。这里请千万下载@2.6.1版本的jszip,否则会报很多错误,难以解决。
getBinaryContent()//读取并获得模板文件的二进制内容
- jszip是一个用于创建、读取和编辑.zip文件的JavaScript库。
- FileSaver.js 是在客户端保存文件的解决方案,非常适合需要生成文件,或者保存不应该发送到外部服务器的敏感信息的应用。
参考博客:https://www.cnblogs.com/xhxdd/p/13716395.html
基本代码
引入插件库
import jszip from 'jszip'
import JSZipUtils from 'jszip-utils'
import docxtemplater from 'docxtemplater'
import FileSaver from 'file-saver'
outputDocx() {
JSZipUtils.getBinaryContent("yyyy届就业质量报告.docx", (error, content) => {// yyyy届就业质量报告.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例,内容为模板的内容
let zip = new jszip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater().loadZip(zip)
// 设置模板变量的值,this.form为替换模板的数据
doc.setData(this.form)
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件,并命名
FileSaver.saveAs(out, "xx大学xx学院" + this.form.year + "届就业质量报告.docx");
});
},