Vue项目中将table的数据导出为xlsx/csv/json（js）

下面我将介绍如何在 Vue 项目中实现将表格数据导出为 XLSX、CSV 和 JSON 格式的完整解决方案。

安装必要依赖

首先安装 xlsx 库，它支持导出 Excel 和 CSV 格式：

	npm install xlsx

table 展示的数据格式

对象数组，与json格式有直接联系

[
    {"ID":"1", "name":"张三", "money":400,"address":"北京市", "state":"1", "date":"2025-04-20"},
    {"ID":"2", "name":"李四", "money":400,"address":"北京市", "state":"1", "date":"2025-04-20"},
    {"ID":"3", "name":"王五", "money":400,"address":"北京市", "state":"1", "date":"2025-04-20"},
    {"ID":"4", "name":"李华", "money":400,"address":"北京市", "state":"1", "date":"2025-04-20"}
]

保存为xlsx、csv、json格式的文件

创建一个 exportUtils.js 工具文件
import * as XLSX from ‘xlsx’;

/**
 * 导出表格数据为多种格式
 * @param {Array} data - 要导出的数据数组
 * @param {String} fileName - 文件名(不带扩展名)
 * @param {String} fileType - 导出类型: 'xlsx', 'csv', 'json'
 */
export function exportTableData(data, fileName = 'exported-data', fileType = 'xlsx') {
  if (!data || !Array.isArray(data) || data.length === 0) {
    console.error('导出数据不能为空');
    return;
  }

  try {
    switch (fileType.toLowerCase()) {
      case 'xlsx':
        exportToXLSX(data, fileName);
        break;
      case 'csv':
        exportToCSV(data, fileName);
        break;
      case 'json':
        exportToJSON(data, fileName);
        break;
      default:
        console.error('不支持的导出格式');
    }
  } catch (error) {
    console.error('导出失败:', error);
  }
}

// 导出为Excel (XLSX)
function exportToXLSX(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, `${fileName}.xlsx`);
}

// 导出为CSV
function exportToCSV(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const csvOutput = XLSX.utils.sheet_to_csv(worksheet);
  downloadFile(csvOutput, `${fileName}.csv`, 'text/csv;charset=utf-8;');
}

// 导出为JSON
function exportToJSON(data, fileName) {
  const jsonString = JSON.stringify(data, null, 2);
  downloadFile(jsonString, `${fileName}.json`, 'application/json');
}

// 通用文件下载方法
function downloadFile(content, fileName, mimeType) {
  const blob = new Blob([content], { type: mimeType });
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 100);
}

在vue中使用

 <el-dropdown split-button type="primary" @command="handleCommand" class="download-btn">
          导出数据
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item command="csv">csv</el-dropdown-item>
            <el-dropdown-item command="xlsx">xlx</el-dropdown-item>
            <el-dropdown-item command="json">json</el-dropdown-item>
          </el-dropdown-menu>
  </el-dropdown>

<script >
import { exportTableData } from '../utils/exportUtils';
handleCommand (command) {
  console.log("handleCommand:", command)
  exportTableData(this.tableData, '用户数据', command);
}
</script >