一、安装依赖包
1、docxtemplaternpm install docxtemplater pizzip -S
2、jszip-utilsnpm install jszip-utils -S
3、pizzipnpm install pizzip -S
4、FileSavernpm install file-saver --save
二、创建Word模板
根据格式样式要求，打开电脑桌面新建一个Word文档，调成需要导出的格式样式做为导出模板。数据使用
{变量}代替
或者word模板是自己准备好：
模板存放位置：
使用vue-cli2的时候，放在static目录下；使用vue-cli3的时候，放在public目录下
三、组件使用
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item
label="用户名称"
prop="userName"
:rules="{
required: true,
message: '请输入用户名称',
trigger: 'blur'
}"
>
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item
label="值"
prop="value"
:rules="{
required: true,
message: '当前项为必填项',
trigger: 'blur'
}"
>
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item>
<el-button
style="background-color: #1094cb;"
type="primary"
@click="onSubmit('form')"
>导出</el-button
>
</el-form-item>
</el-form>
</template>
data里
form: {
workWPS: "银川市人社局",
userName: "王强",
sex: "男",
middleTime: "2023-12-31",
idCard: "653121199542516522",
phone: "18599044752",
jobTime: "2022-10-10",
jobTime2: "2021-11-00",
id: "013473479",
tipeJob: "职工",
voll: "重伤类",
address: "银川市兴庆区丽景湖畔25号",
},
table: {
name:"aaa",
value:"111"
},
js里：
<script>
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
data() {
return {
form: {
userName: "",
value: ""
},
table:[{
name:"aaa",
value:"111"
},{
name:"bbb",
value:"222"
}]
};
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.exportWord();
} else {
console.log("error submit!!");
return false;
}
});
},
exportWord() {
const _this = this
JSZipUtils.getBinaryContent('/static/word.docx', function(error, content) {
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content)
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip)
// 设置模板变量的值
// doc.setData(
// _this.form,
// _this.table
// )
doc.setData({
..._this.form,
..._this.table
})
try {
// 用模板变量的值替换所有模板变量
doc.render()
} catch (error) {
// 抛出异常
// let e = {
// message: error.message,
// name: error.name,
// stack: error.stack,
// properties: error.properties,
// }
this.$message.error('导出报表失败')
throw error
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, '宁夏回族自治区旧伤复发就医确认表.docx')
})
},
}
</script>四、效果图
温馨提示：
可能会出现的问题报错如下
出现此问题是因为模板路径
url写的不对，找不到模板文档~别担心，只需要修改下这里的路径就行
代码：
完整code
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-button
style="background-color: #1094cb;"
type="primary"
@click="onSubmit('form')"
>导出</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
data() {
return {
form: {
workWPS: "银川市人社局",
userName: "王强",
sex: "男",
middleTime: "2023-12-31",
idCard: "653121199542516522",
phone: "18599044752",
jobTime: "2022-10-10",
jobTime2: "2021-11-00",
id: "013473479",
tipeJob: "职工",
voll: "重伤类",
address: "银川市兴庆区丽景湖畔25号",
},
table: {
name:"aaa",
value:"111"
},
// table:[{
// name:"aaa",
// value:"111"
// },
// {
// name:"bbb",
// value:"222"
// }
// ],
},
created() {
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.exportWord();
} else {
console.log("error submit!!");
return false;
}
});
},
exportWord() {
const _this = this
JSZipUtils.getBinaryContent('/static/word.docx', function(error, content) {
// 抛出异常
if (error) {
throw error
}
// 创建一个JSZip实例，内容为模板的内容
let zip = new JSZip(content)
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip)
// 设置模板变量的值
// doc.setData(
// _this.form,
// _this.table
// )
doc.setData({
..._this.form,
..._this.table
})
try {
// 用模板变量的值替换所有模板变量
doc.render()
} catch (error) {
// 抛出异常
// let e = {
// message: error.message,
// name: error.name,
// stack: error.stack,
// properties: error.properties,
// }
this.$message.error('导出报表失败')
throw error
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, '宁夏回族自治区旧伤复发就医确认表.docx')
})
},
}
};
</script>
<style scoped lang="less">
</style>