【应用场景:由前端导出word文件的需求】
一、安装依赖
1、npm i docxtemplater
2、npm i docxtemplater-image-module-free
3、npm i pizzip
4、npm i file-saver(如果使用的是ts还需安装类型声明文件:npm i @types/file-saver)
二、引用
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import PizZipUtils from 'pizzip/utils'
import { saveAs } from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
三、制作word模板
1、文本类型(举个栗子)
A、简单文本类型
// 数据结构
let data = { nowDate: "2023-10-07", year: 2023 }// word模板效果
报告年度:{year} 年
编制日期:{nowDate}
// 呈现效果
报告年度:2023 年
编制日期:2023-10-07
B、数组循环
// 数据结构
let data = { gas: [{gasEmissionTypeName: "E电力", totalValue: 18.26}] }// word模板效果
温室气体排放 {#gas}{gasEmissionTypeName}:{totalValue}{/gas}
// 呈现效果
温室气体排放 E电力:18.26
C、表格数组
// 数据结构
let data = { source: [{accountingBoundary: "净购入电力消费排放"
carbonEmissionValue: 0.77
dataSources: "2"
dataSourcesName: "表计量"
endTime: "2023-12-31 00:00:00"
gasEmissionTypeName: "E电力"
id: 3
netConsumption: "1.344"
startTime: "2023-01-01 00:00:00"
......
}] }
// word模板效果
// 呈现效果
2、图片类型(举个栗子)
// 数据结构
let data = { imgs: [{ url: "xxx/xxx.jpg" },{ url: "xxx/xxx.jpg" }] }// word模板效果
{#imgs}{%url}{/imgs}
3、注意(word文档制作完成后,将模板文件放到public文件夹下)
四、实现代码
// 导出报告1(按钮)
const reportOne = async () => {
formData.value.type = 1
// 导出接口
const res = await getCarbonReportData({
startTime: enableDate.value ? enableDate.value[0] : '',
endTime: enableDate.value ? enableDate.value[1] : '',
siteId: formData.value.siteId,
type: formData.value.type
})
if (res.code == result_code) {
carbonReportData.value = res.data
}
const loadFile = function loadFile(url: any, callback: any) {
PizZipUtils.getBinaryContent(url, callback)
}
// uploadUrlData.value + 'file/mapper/uploadfile/2023100510410530454.docx'
loadFile(
'@/../public/模板01.docx',
function (error: any, content: any) {
if (error) {
throw error
}
// 有picture的话,需加上下面这段代码
let opts: any = {}
opts.centered = false
opts.fileType = 'docx'
opts.getImage = function (tagValue: any) {
return new Promise(function (resolve, reject) {
PizZipUtils.getBinaryContent(tagValue, function (error: any, content: any) {
if (error) {
return reject(error)
}
return resolve(content)
})
})
}
opts.getSize = function () {
return [255, 200] //这里是生成的word文件里picture的宽和高
}
let imageModule = new ImageModule(opts)
var zip = new PizZip(content)
let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile()
// 有picture的话,需加载处理模块
doc.resolveData(carbonReportData.value).then(function () {
doc.render()
var out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
saveAs(out, '导出报告' + '.docx')
})
}
)
}