前端学习---实现下载功能（下载为.CSV表格）

最新推荐文章于 2023-12-18 10:20:41 发布

小桂子的学习记录

最新推荐文章于 2023-12-18 10:20:41 发布

阅读量302

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/laurinsyra/article/details/132741056

版权

<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>