快捷导航
需要用到的组件
核心代码
模板链接
需要用到的组件
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'//JS解析文件
import { saveAs } from 'file-saver'//文件保存
import ImageModule from 'docxtemplater-image-module-free'//图片相关
import expressions from 'angular-expressions' //角度筛选器有关
import merge from 'lodash/merge' //角度筛选器有关
以上类库都可以使用npm进行安装
npm install --save docxtemplater
npm install --save docxtemplater-image-module-free
npm install --save pizzip
npm install --save jszip-utils
npm install --save lodash/merge
npm install --save angular-expressions
npm install --save file-saver
核心代码
exportWord () {
this.obj.ragionName = this.getRegionName(this.obj.regionId)//this.obj为要导出的数据
//表格与外层基本字段重复的处理，不然后面会覆盖前面相同字段
let params = JSON.parse(JSON.stringify(this.obj))
params.outRemark = params.remark
delete params.remark
//处理数据结束
let _this = this
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("/xxxxx.docx", (error, content) => {
console.log(this.obj)
// xxxxx.docx是模板。在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new PizZip(content)
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater()
//设置图片方法和位置
let opts = {}
opts.centered = false
opts.getImage = function (tagValue, tagName) {
return new Promise(function (resolve, reject) {
JSZipUtils.getBinaryContent(tagValue, (err, content) => {
if (error) {
return reject(error)
}
return resolve(content)
})
})
}
//图片有关代码，没有图片的可以删除
opts.getSize = function (img, tagValue, tagName) {
// FOR FIXED SIZE IMAGE :
return [200, 200]//图片大小 （这个可以写成动态的，开发文档上有）
return new Promise(function (resolve, reject) {
var image = new Image()
image.src = url
image.onload = function () {
resolve([image.width, image.height])
}
image.onerror = function (e) {
console.log('img, tagValue, tagName : ', img, tagValue, tagName)
reject(e)
}
})
}
//角度筛选器 （可以在word中进行一些复杂的 运算）如果加入角度解析器模板报错一般是特殊字符导致比如下面的%此处替换不会影响导出
let angularParser = function (tag) {
if (tag === '.') {
return {
get: function (s) { return s }
}
}
const expr = expressions.compile(
tag.replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"').replace(/(%)/g, '')
)
return {
get: function (scope, context) {
let obj = {}
const scopeList = context.scopeList
const num = context.num
for (let i = 0, len = num + 1; i < len; i++) {
obj = merge(obj, scopeList[i])
}
return expr(scope, obj)
}
}
}
//
let imageModule = new ImageModule(opts)//创建imageModule实例并写入配置
doc.loadZip(zip).setOptions({ parser: angularParser })//设置角度解析器
//此处为我自己代码逻辑 图片的处理需要异步处理
let images = []
let urlArr = params.secondFaultPic ? params.secondFaultPic.split(',') : []
// 判断有没有上传附件
if (urlArr.length > 0) {
urlArr.map((item) => {
let param = {}
param.src = item
images.push(param)
})
}
//上传图片后的导出逻辑
if (images.length > 0) {
doc.attachModule(imageModule).compile()
doc.resolveData({//docxtemplater API 异步吸入
...params,
table: params.repairRecordPlanEntities,//表格变量
image: images
}).then(() => {
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, "xxxxx.docx")
})
return
}
// 设置模板变量的值 没有上传图片直接导出
doc.setData({
...params,
table: params.repairRecordPlanEntities,
})
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, "xxxx.docx")
})
},
遇到的问题
多半问题为模板问题解析错误时先检查模板中字段是否全部为英文大括号包裹’{attrName}’
角度解析器报错请根据报错替换特殊字符
空字段的处理在模板中不处理为undefined
相关链接
docx模板下载链接：https://download.csdn.net/download/star7783620/15045428
(没有积分请私信我，设置的5积分)
角度解析器相关：https://docxtemplater.readthedocs.io/en/latest/angular_parse.html
图片样例：https://docxtemplater.com/demo/#image
参考链接：https://www.jianshu.com/p/b3622d6f8d98 <——数据格式可参考此链接
https://blog.csdn.net/meimeilive/article/details/103150412/
https://www.npmjs.com/package/docxtemplater-image-module-free
https://docxtemplater.com/demo/#loop-table
另：多张图片参考：
{image:[{src:'url'},{src:'url'}]}