前端导出word实现方法
如何实现?
npm i docxtemplater jszip-utils file-saver jszip@2.6.1
import Docxtemplater from docxtemplater
import JSZipUtils from jszip-utils
import { saveAs } from file-saver
import JSZip from jszip
wordData: any = {
title: "5月监控月报",
data: [
{
name: "天气雷达",
remark: "remark1",
status: "70%"
},
{
name: "探空雷达",
remark: "remark2",
status: "72%"
}
]
}
放入word模板,在vue项目的public文件下面,且必须是.docx,不能是.doc
exportWord () {
let _this = this
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(report/word.docx, function (error:any, content:any) {
if (error) throw error // 抛出异常
let zip = new JSZip(content) // 创建一个JSZip实例,内容为模板的内容
let doc = new Docxtemplater().loadZip(zip) // 创建并加载docxtemplater实例对象
doc.setData({ ..._this.wordData }) // 设置模板变量的值
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, 日报.doc)
})
}
