在我们涉及表格数据统计的时候，难免会进行数据合并然后导出展示，一般后端会给我们写导出接口，但是有时候后端给我们返回的数据不是全部都要使用，少部分需要导出的时候，这个时候就满足不了需求，就需要我们前端进行导出
就比如给我们很多字段，但是导出的时候只需要某几个的情况
1、 我使用的是xlsx,首先进行下载
npm i xlsx
2、在对应的页面进行引入使用(这是引入假数据的页面，但是合计不是中文)
3、我们可以在main.ts引入并且全局挂载
import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
// 使用element-plus 并且设置全局的大小
app.use(ElementPlus, {
locale: locale
}).use(store).use(router).mount('#app')
这样就是中文的了
4、比如说表格有这么多数据，我不想导出固化剂加水量的数据，这个时候我们前端就调用xlsx方法
<template>
<el-button type="warning" @click="handleExport">导出</el-button>
<el-table v-loading="loading" border :cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%" stripe show-summary>
<el-table-column prop="startTime" label="开始时间">
</el-table-column>
<el-table-column prop="endTime" label="结束时间">
</el-table-column>
<el-table-column prop="gq" label="矸石量（t）">
</el-table-column>
<el-table-column prop="fac" label="粉煤灰量（t）">
</el-table-column>
<el-table-column prop="wcfga" label="矸石加水量（m³）">
</el-table-column>
<el-table-column prop="cc" label="固化剂量（t）">
</el-table-column>
<el-table-column prop="cwa" label="固化剂加水量（m³）">
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import * as XLSX from 'xlsx'
import { ref } from 'vue'
const loading = ref(false);
const excelList = ref([])
// 这是后端表格返回的getList()方法的数据
const tableData = ref([
{
"createBy": null,
"createTime": "2024-06-03 14:31:18",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "a9a0332e34a1425f8f54833bd1b851ad",
"startTime": "2024-06-01 12:00",
"endTime": "2024-06-01 17:00",
"gq": 26.963,
"fac": 15.802,
"wcfga": 17.9,
"cc": 19.201,
"cwa": null,
"startDate": null,
"endDate": null
},
{
"createBy": null,
"createTime": "2024-06-03 14:30:26",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "36f5111bd8214ceba9aa3afd0cb1bfa2",
"startTime": "2024-05-28 12:00",
"endTime": "2024-05-28 21:00",
"gq": 271.823,
"fac": 112.779,
"wcfga": 147.2,
"cc": 134.794,
"cwa": null,
"startDate": null,
"endDate": null
},
{
"createBy": null,
"createTime": "2024-05-26 19:51:31",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "3c354565a68849c3b0d034fdd037ecd1",
"startTime": "2024-05-26 14:05",
"endTime": "2024-05-26 21:00",
"gq": 324.204,
"fac": 408.291,
"wcfga": 153,
"cc": 117.5,
"cwa": null,
"startDate": null,
"endDate": null
}
])
// 导出逻辑和合并逻辑
const handleExport = () => {
// 点击导出调用接口给的数据
const response = [
{
"createBy": null,
"createTime": "2024-06-03 14:31:18",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "a9a0332e34a1425f8f54833bd1b851ad",
"startTime": "2024-06-01 12:00",
"endTime": "2024-06-01 17:00",
"gq": 26.963,
"fac": 15.802,
"wcfga": 17.9,
"cc": 19.201,
"cwa": null,
"startDate": null,
"endDate": null
},
{
"createBy": null,
"createTime": "2024-06-03 14:30:26",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "36f5111bd8214ceba9aa3afd0cb1bfa2",
"startTime": "2024-05-28 12:00",
"endTime": "2024-05-28 21:00",
"gq": 271.823,
"fac": 112.779,
"wcfga": 147.2,
"cc": 134.794,
"cwa": null,
"startDate": null,
"endDate": null
},
{
"createBy": null,
"createTime": "2024-05-26 19:51:31",
"updateBy": null,
"updateTime": null,
"remark": null,
"id": "3c354565a68849c3b0d034fdd037ecd1",
"startTime": "2024-05-26 14:05",
"endTime": "2024-05-26 21:00",
"gq": 324.204,
"fac": 408.291,
"wcfga": 153,
"cc": 117.5,
"cwa": null,
"startDate": null,
"endDate": null
}
]
excelList.value = response
let gqSum = excelList.value.reduce((prev, item) => {
prev += item.gq
return prev
}, 0)
let facSum = excelList.value.reduce((prev, item) => {
prev += item.fac
return prev
}, 0)
let wcfgaSum = excelList.value.reduce((prev, item) => {
prev += item.wcfga
return prev
}, 0)
let ccSum = excelList.value.reduce((prev, item) => {
prev += item.cc
return prev
}, 0)
let cwaSum = excelList.value.reduce((prev, item) => {
prev += item.cwa
return prev
}, 0)
excelList.value.push({ startTime: '合计', gq: gqSum, fac: facSum, wcfga: wcfgaSum, cc: ccSum})
// 1.把数据转化为表格名称对应
let arr = excelList.value.map((item) => {
return {
'开始时间': item.startTime,
'结束时间': item.endTime,
'矸石量(t)': item.gq,
'粉煤灰量(t)': item.fac,
'矸石加水量(m³)': item.wcfga,
'固化剂量(t)': item.cc,
};
});
//2.用于将 JSON 数据转换为 Excel 工作表中的单元格数据。
let sheet = XLSX.utils.json_to_sheet(arr);
//3.用于创建一个新的 Excel 工作簿对象它返回一个空白的工作簿，可以向其中添加工作表和单元格数据。
let book = XLSX.utils.book_new();
//4.用于向现有的 Excel 工作簿对象（Workbook）中添加一个新的工作表
// book_append_sheet(wb, sheet, name=None)
//参数wb是要将工作表添加到的 Workbook 对象；sheet 参数是要添加的 Worksheet 对象；name 参数是要为工作表指定的名称（如果未指定，则使用默认名称）
XLSX.utils.book_append_sheet(book, sheet, "sheet1");
//5.用于将 Excel 工作簿下载到本地文件系统中 book要下载的Eceial表格，第二个参数是表格名称
XLSX.writeFile(book, `充填量数据.xlsx`);
}
</script>
<style lang="scss" scoped>
/* // 表格尾部的合计这行文字对齐 */
:deep(.el-table__footer-wrapper tbody td.el-table__cell) {
text-align: center;
}
</style>
