引入插件
npm install file-saver
npm install docxtemplater
npm install pizzip
npm install jszip-utils
npm install angular-expressions
npm install lodash
配置导出word文件js
将下面的代码保存为 exportBriefDataDocx.js,放在自己项目的工具类中,方便调用。
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
export const ExportBriefDataDocx = (tempDocxPath, data, fileName) => {
console.log(tempDocxPath, data, fileName, 111)
var expressions = require('angular-expressions')
var assign = require('lodash/assign')
expressions.filters.lower = function(input) {
// This condition should be used to make sure that if your input is
// undefined, your output will be undefined as well and will not
// throw an error
if (!input) return input
// toLowerCase() 方法用于把字符串转换为小写。
return input.toLowerCase()
}
function angularParser(tag) {
tag = tag
.replace(/^\.$/, 'this')
.replace(/(’|‘)/g, "'")
.replace(/(“|”)/g, '"')
const expr = expressions.compile(tag)
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 = assign(obj, scopeList[i])
}
return expr(scope, obj)
}
}
}
JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
if (error) {
console.log(error)
}
// 创建一个JSZip实例,内容为模板的内容
// let zip = new JSZip(content); //用PizZip替代
const zip = new PizZip(content)
// 创建并加载 Docxtemplater 实例对象
const doc = new Docxtemplater(zip, { parser: angularParser })
// 设置模板变量的值
doc.setData(data)
try {
// 呈现文档,会将内部所有变量替换成值,
doc.render()
} catch (error) {
const e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
}
console.log({ error: e })
// 当使用json记录时,此处抛出错误信息
throw error
}
// 生成一个代表Docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, fileName)
})
}
配置导出word 模板
新建后缀名为
.docx
的文件,根据需求绘制word 模板,将文件保存到 (static/public) 文件下
导出事件代码展示
// 引入工具类中写的导出Word 配置文件 js
import { ExportBriefDataDocx } from '../***/exportBriefDataDocx'
....
// 导出按钮触发事件
exportDocx(){
this.$message.success("导出事件触发“)
/*
* 三个入参
* 第一个入参对应导出word模板的路径
* 第二个入参是word模板渲染的数据
* 第三个入参是导出word模板的名称
*/
ExportBriefDataDocx('/exportWord.docx', this.docxData, '文档导出')
}
导出成功展示
参考
郭小白呀:vue导出word
GL曲终人散:vue项目导出word
几个注意点
模板位置
vue 2.0创建的项目 就放在
static
文件夹下,vue3.0创建的放在public
文件夹下
点击导出报错怎么办
- 检查导出word文件路径引入对不对
- 检查导出word模板后缀名是否正确
- 检查渲染word模板的格式是不是正确(只能是对象)
类似于这样的错误
支持数组么
渲染只能是对象,数组渲染需要嵌套在对象里,如下所示
导出的word有些字段展示的是 undefined 是怎么回事
导出模板上有某一个字段,但是渲染的对象中没有该字段,或者该字段是一个不可展示的类型。解决办法可以预处理一下,没有值的话传
""
。
数组怎么展示
{#Data} 开始 {/Data} 结束,循环主题写每一个对象的key值