点击按钮实现表格数据导出成csv文件
场景
比如你页面上展示的表格,想要实现数据的导出功能,想要把数据导出成csv格式的文件,那么就可以参考以下代码
使用
<button @click="exportTable">
<span class="iconfont icon-download"></span>
<p class="downloadText">Export Table</p>
</button>
exportTable() {
//这里就是替换成你表格的数据
const allData = [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
];
// Extract headers
const headers = Object.keys(allData[0]);
// Create CSV content with headers
let csvContent = '\uFEFF' + headers.join(',') + '\n';
// Append rows
allData.forEach(row => {
const rowData = headers.map(header => row[header]);
csvContent += rowData.join(',') + '\n';
});
// Create a Blob containing the CSV data with UTF-8 encoding
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'table_data.csv';
link.click();
},
最终效果图:
在这里插入图片描述
备注:希望可以帮到大家,实际使用过程中,如有错误,欢迎评论区交流指正!