一、需要用到以下插件:
-- 安装 docxtemplater
npm install docxtemplater pizzip --save
-- 安装 jszip-utils
npm install jszip-utils --save
-- 安装 jszip
npm install jszip --save
-- 安装 FileSaver
npm install file-saver --save
二、引入到页面内
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
三、前端部分,主要用到elementplus部分组件,界面如下:
四、需要准备一个word模板文件(按自己所需格式),放到项目public文件夹下,如图所示:
需要填写的部分都被定义为变量,
单一变量格式如下:
{why}
json格式如下:
{#things}
{time}-{thing}
{/things}
前端与之对应 ,如下:
wordData: {
title: '请假申请表',
name:'小张',
age:'28',
"things": [
{ time :"2022-4-1",thing: "在家"},
{ time :"2022-4-2",thing: "上班"},
]
},
五,完整代码如下:
<template>
<div class="home-css">
<el-button style="margin: 20px" type="success" size="large" @click="out">导出申请表</el-button>
<el-card class="el-card-css">
<div style="display: flex;align-items: center;margin-top: 20px">
<span>部门:</span>
<el-input v-model="organ" placeholder="" clearable class="input"/>
<span>姓名:</span>
<el-input v-model="name" placeholder="" clearable class="input" />
<span>性别:</span>
<el-input v-model="gender" placeholder="" clearable class="input" />
</div>
<div style="display: flex;align-items: center;margin-top: 20px">
<span>年龄:</span>
<el-input v-model="age" placeholder="" clearable class="input" />
<span>天数:</span>
<el-input v-model="days" placeholder="" clearable class="input" />
<span>职务:</span>
<el-input v-model="worker" placeholder="" clearable class="input" />
</div>
<div style="display: flex;align-items: center;margin-top: 20px">
<span>时间:</span>
<el-input v-model="date" placeholder="" clearable class="input" />
</div>
<div style="display: flex;align-items: center;margin-top: 20px">
<span>理由:</span>
<el-input
v-model="why"
maxlength="90"
show-word-limit
type="textarea"
style="width: 500px; margin-left: 20px"
/>
</div>
</el-card>
</div>
</template>
<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
export default {
name: "Devicemanage",
data(){
return{
organ:'',
name:'',
gender:'',
age:'',
days:'',
worker:'',
date:'',
why:'',
wordData: {
title:'请假审批表',
organ:'',
name:'',
gender:'',
age:'',
days:'',
worker:'',
date:'',
why:'',
},
}
},
methods:{
//导出word文件
out() {
//将Input框输入的内容一一对应到模板数据wordData当中
this.wordData.organ=this.organ;
this.wordData.name=this.name;
this.wordData.gender=this.gender;
this.wordData.age=this.age;
this.wordData.days=this.days;
this.wordData.worker=this.worker;
this.wordData.date=this.date;
this.wordData.why=this.why;
let that = this;
//模板文件的位置,放到public下面
let wordsrc = "/请假审批表.docx";
//导出文件的名字
let wordname = "请假审批表.docx";
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(wordsrc, function(error, content) {
// wordsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docx templater实例对象
let doc = new docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
... that.wordData, // worddata中的数据可以再模板中直接使用
});
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, wordname);
});
},
}
}
</script>
<style scoped>
.home-css{
background-color: #f1f1f9;
min-height: calc(100vh - 60px - 50px);
}
.el-card-css{
width: 50%;
height: 300px;
margin-right: 20px;
align-items: center;
margin-left: 20px;
}
.input{
width: 200px;
margin-right: 50px;
margin-left: 20px
}
</style>