<template>
<!-- 定义个下载按键-->
<button @click="downloadData">下载CSV</button>
<!-- 表格数据-->
<el-table :data="tableData2" border height="tableHeight" style="width: 100%;margin-top:20px;" size="small">
<el-table-column prop="Sn" label="SN码" align="center"></el-table-column>
<el-table-column prop="No" label="终端号" align="center"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return{
Sn:'',
No:'',
fieldToChineseMap: {}, // 初始化为一个空对象
}
},
methods: {
async get_data_overdue(){
try{
//....获取数据的逻辑
}
},
},
//格式转换逻辑
convertToCSV(data) {
console.log('this.fieldToChineseMap:', this.fieldToChineseMap);
// 获取映射后的表头
const headers = Object.keys(this.fieldToChineseMap).map(field => this.fieldToChineseMap[field]);
// 将数据转换为 CSV 格式的字符串的逻辑
let csvContent = '\uFEFF';
csvContent += headers.join(',') + '\n';//将表头数据转换为 CSV 文件格式中
//console.log('Headers:', headers);
// 添加每行数据
data.forEach(item => {
const row = Object.keys(this.fieldToChineseMap).map(field => item[field]);
csvContent += row.join(',') + '\n';
});
return csvContent;
},
//下载逻辑
downloadData() {
let filteredData; // 在条件语句之前定义变量
filteredData = this.tableData2
this.fieldToChineseMap = {
Sn: 'SN码',
No: '终端号',
};
// 将筛选后的数据转换为 CSV 格式的字符串
const csvContent = this.convertToCSV(filteredData);
//console.log(csvContent)
// 创建 Blob 对象和临时链接
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = window.URL.createObjectURL(blob);
// 创建一个隐藏的 <a> 元素并触发点击事件进行下载
const link = document.createElement('a');
link.href = url;
link.download = '下载数据test.csv';//指定文件名
link.click();
// 清理资源
URL.revokeObjectURL(url);
},
}
</script>
<style>
</style>
前端学习---实现下载功能(下载为.CSV表格)
最新推荐文章于 2024-04-29 11:17:50 发布