简单实现 vue导出为word
导出对象:效果图:1 安装依赖npm install docxtemplater pizzip--savenpm install jszip-utils --savenpm install jszip --savenpm install file-saver --save2 定义模板3 vue cli 3.0 模板放置位置4 导出效果图5 代码<template><div sty
·
导出对象:
效果图:
1 安装依赖
npm install docxtemplater pizzip --save
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save
2 定义模板
3 vue cli 3.0 模板放置位置
4 导出效果图
5 代码
<template>
<div style="margin:50px">
<el-table :data="course" border style="width: 80%">
<el-table-column prop="faculty" label="院系"> </el-table-column>
<el-table-column prop="major" label="专业"> </el-table-column>
<el-table-column prop="courseName" label="课程名称"> </el-table-column>
<el-table-column prop="grade" label="年级"> </el-table-column>
<el-table-column prop="term" label="学期"> </el-table-column>
<el-table-column prop="credit" label="学分">
<template slot-scope="scope"> {{ scope.row.credit }}学分 </template>
</el-table-column>
<el-table-column prop="period" label="学时">
<template slot-scope="scope"> {{ scope.row.period }}学时 </template>
</el-table-column>
<el-table-column prop="shape" 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 {
form: {
title: "课程学分表",
},
course: [
{
faculty: "数据科学学院",
major: "计算机科学与技术",
courseName: "数据结构",
grade: "大二",
term: "第一学期",
credit: "4",
period: "56",
shape: "闭卷",
},
{
faculty: "数据科学学院",
major: "计算机科学与技术",
courseName: "大学英语2",
grade: "大二",
term: "第一学期",
credit: "4",
period: "56",
shape: "闭卷",
},
],
};
},
methods: {
exportWord() {
let course = this.course;
let form = this.form;
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({
...form,
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>
更多推荐
已为社区贡献1条内容
所有评论(0)