前端实现文件导出
下载xlsx插件
npm install xlsx
新建文件json2Excel.js 封装函数
import * as XLSX from "xlsx";
export default (data, sheetName, fileName) => {
const jsonWorkSheet = XLSX.utils.json_to_sheet(data);
const workBook = {
SheetNames: [sheetName], // 指定有序 sheet 的 name
Sheets: {
[sheetName]: jsonWorkSheet, // 表格数据内容
},
};
return XLSX.writeFile(workBook, fileName); // 向文件系统写出文件
};
组件使用
<template>
<div class="exportFilePage">
<el-table :data="jsonData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="age" label="年龄" width="180"> </el-table-column>
<el-table-column prop="skill" label="技能"> </el-table-column>
<el-table-column prop="telephone" label="电话"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<div class="fileName">
<p class="fileName_title">文件名:</p>
<el-input v-model="fileName"></el-input>
</div>
<div @click="exportFile" class="exportFileBtn">文件导出</div>
</div>
</template>
<script>
import json2Excel from "@/utils/json2Excel";
export default {
name: "",
data() {
return {
// 测试的 JSON 数据
jsonData: [
{
name: "喜洋洋",
age: 18,
skill: "破坏",
telephone: 31220200825,
address: "QQ群",
},
{
name: "熊大",
age: 19,
skill: "干饭",
telephone: 5520200826,
address: "艾欧尼亚",
},
{
name: "迪迦",
age: 20000,
skill: "打怪兽",
telephone: 1420200827,
address: "m8小黑屋",
}
],
fileName: "",
};
},
created() {},
computed: {},
methods: {
exportFile() {
// key -> name 的映射
const excelKeyToName = {
name: "姓名",
age: "年龄",
skill: "特长",
telephone: "电话",
address: "地址",
};
// 格式化参数
const data = this.jsonData.map((item) => {
const newItem = {};
Object.keys(item).forEach((key) => {
newItem[excelKeyToName[key]] = item[key];
});
return newItem;
});
// 导出 Excel
if (this.fileName == "") {
this.fileName = "大傻逼的文件";
}
json2Excel(data, "sheet1", `${this.fileName}.xlsx`);
this.fileName = "";
},
},
};
</script>
<style lang='scss' scoped>
.exportFilePage {
.exportFileBtn {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgb(0, 198, 46);
margin-top: 12px;
cursor: pointer;
}
.fileName {
display: flex;
width: 220px;
height: 40px;
line-height: 40px;
margin-top: 12px;
margin-bottom: 12px;
.fileName_title {
width: 80px;
}
}
}
</style>
