下载依赖及相关版本号
npm install XXX@版本号
"pizzip": "^3.0.6",
"docxtemplater": "^3.22.1",
"file-saver": "^2.0.2",
"jszip-utils": "^0.1.0",
引用
import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
// import JSZip from 'jszip';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
方法:
// 导出word
handleExport() {
if (this.currentRow) {
let processList = []
let res = 执行接口 返回的数据
if (res && res.code === 200 && res.data && res.data.length) {
for(let i = 0; i < res.data.length; i++) {
let process = {
// 处理人
dutyMan: res.data[i].dutyMan || '',
// 联系手机
dutyManTel: res.data[i].dutyManTel || '',
// 处理时间
finishDate: this.timeFormat(res.data[i].finishDate) || '',
// 处理状态
eventStatus: res.data[i].eventStatus || '',
// 处理描述
processReason: res.data[i].processReason || ''
}
processList.push(process);
}
}
let date = new Date();
let exportInfo = {
eventTitle: this.currentRow.eventTitle || '',
gridName: this.currentRow.gridName || '',
eventType: '突发事件',
// 事件类别
eventTypeName: this.currentRow.eventTypeName || '',
// 发生时间
occurDate: this.currentRow.occurDate || '',
// 上报时间
reportDate: this.currentRow.reportDate || '',
// 上报人
reportName: this.currentRow.reportName || '',
// 上报人Tel
reportTel: this.currentRow.reportTel || '',
// 办理时限
planEndDate: this.currentRow.planEndDate || '',
// 事件来源
eventSource: this.currentRow.eventSource || '',
// 事件发生地址
eventDetailAddress: this.currentRow.eventDetailAddress || '',
// 事件描述
eventDesc: this.currentRow.eventDesc || '',
// 事件等级
eventLevel: this.currentRow.eventLevel || '',
unitName: this.$store.state.user.currentUser.unitName,
curYear: date.getFullYear(),
curMonth: date.getMonth() + 1,
curDay: date.getDate(),
// 单号
number: date.getTime()
}
// 导出
this.downloadprice(exportInfo, processList)
} else {
this.$message({
type: 'info',
message: '请选择一条记录'
})
}
},
// 下载事件
downloadprice(exportInfo, processList) {
// 读取并获得模板文件的二进制内容
let docxsrc = "../../../../../static/file/world.docx"; // 模板文件的位置
JSZipUtils.getBinaryContent(docxsrc + '?random=' + Math.random(), function(error, content) {
// world.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater();
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({
// 基本信息
...exportInfo,
// 流程列表信息
processList: processList
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
// eslint-disable-next-line no-unused-vars
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'
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, '事件移交单.docx');
});
},
word模板且必须是.docx,不能是.doc
docxtemplater 不支持jszip,会有报错,因此要使用PizZip
模板的路径要写正确,不然会报错找不到文件
{#processList}处理人:{dutyMan} 联系手机:{dutyManTel} 处理时间:{finishDate} 处理状态:{eventStatus} 处理描述:{processReason}
{/processList}
注意此处{#processList} .....{/processList}
,processList
是我们的列表数据,{#XXX}...{/XXX}
表示循环,{dutyMan},{dutyManTel}
等是processList
中的字段名称
// 不是对象类型
"products": ["Windows","Mac OSX","Ubuntu"]
// 模板文件中应该这样设置
{#products} {.} {/products}
更多参考:
https://www.jianshu.com/p/b3622d6f8d98