【点击按钮实现表格数据导出成csv文件】

点击按钮实现表格数据导出成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();
    },

最终效果图：

在这里插入图片描述
备注：希望可以帮到大家，实际使用过程中，如有错误，欢迎评论区交流指正！