导出内容:
![](https://i-blog.csdnimg.cn/blog_migrate/9e25f17014e7db287c9823f11a401344.png)
安装依赖
npm install docxtemplater pizzip --save
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save
导出word文件模板
![](https://i-blog.csdnimg.cn/blog_migrate/6e02bd4ee39553254446808a09b5f2e1.png)
文件放置在 public 下即可
导出文件
![](https://i-blog.csdnimg.cn/blog_migrate/87fd782dd9243ee96b33f4e386c769e4.png)
代码模板
<template>
<div style="margin: 50px">
<el-table :data="course" border style="width: 80%">
<el-table-column prop="orderType" label="商机类型"> </el-table-column>
<el-table-column prop="eggSize" label="鸡蛋码数"> </el-table-column>
<el-table-column prop="eggCategoryCode" label="蛋品品类">
</el-table-column>
</el-table>
<el-button @click.stop="exportWord" type="primary" size="small"
>导出</el-button
>
</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 {
course: [
{
orderType: "需求端",
eggSize: "25",
eggCategoryCode: "粉壳蛋",
},
{
orderType: "供应端",
eggSize: "41",
eggCategoryCode: "红壳蛋",
},
{
orderType: "需求端",
eggSize: "38",
eggCategoryCode: "绿壳蛋",
},
],
};
},
methods: {
exportWord() {
let course = this.course;
JSZipUtils.getBinaryContent("export.docx", function (error, content) {
// 抛出异常
if (error) {
throw error;
}
// 创建一个JSZip实例,内容为模板的内容
let zip = new JSZip(content);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
course,
});
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>