vue el-table 表格数据导出为CSV文件并保存在本地

最新推荐文章于 2025-03-13 16:28:54 发布

将雨.

最新推荐文章于 2025-03-13 16:28:54 发布

阅读量1k

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/takeki_/article/details/134876173

版权

1.npm安装js库

npm install papaparse

2.页面添加el-button，点击按钮触发导出事件

<el-button type="primary" @click="exportToCSV">导出CSV</el-button>

3.methods中处理方法

import Papa from 'papaparse'; // script中引入第一步安装的js库

 // 导出CSV方法
    exportToCSV() {
       // exportData是el-table中绑定的:data数据
      const csv = Papa.unparse(exportData, {
          header: true, // 包含标题行
        });

        // 创建一个Blob对象，并保存为CSV文件
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');

        if (navigator.msSaveBlob) {
          // IE 10+
          navigator.msSaveBlob(blob, 'tableData.csv');
        } else {
          // 其他浏览器
          const url = window.URL.createObjectURL(blob);
          link.href = url;
          link.download = 'tableData.csv';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }
  },