当前位置：首页 > React

react实现表格导出

2026-01-26 23:50:27React

实现表格导出功能

在React中实现表格导出功能，通常需要将表格数据转换为Excel或CSV格式。以下是几种常见的方法：

使用xlsx库导出Excel

安装xlsx库：

npm install xlsx

示例代码：

import * as XLSX from 'xlsx';

function exportToExcel(data, fileName) {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, `${fileName}.xlsx`);
}

// 使用示例
const tableData = [
  { Name: 'John', Age: 30 },
  { Name: 'Jane', Age: 25 }
];
<button onClick={() => exportToExcel(tableData, 'users')}>导出Excel</button>

导出CSV文件

纯前端实现CSV导出：

function exportToCSV(data, fileName) {
  const headers = Object.keys(data[0]).join(',');
  const rows = data.map(obj => Object.values(obj).join(','));
  const csvContent = [headers, ...rows].join('\n');

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `${fileName}.csv`;
  link.click();
}

使用react-csv库

安装react-csv：

npm install react-csv

使用示例：

import { CSVLink } from 'react-csv';

const data = [
  { name: 'John', email: 'john@example.com' },
  { name: 'Jane', email: 'jane@example.com' }
];

<CSVLink data={data} filename={"users.csv"}>
  导出CSV
</CSVLink>

处理复杂表格结构

对于需要导出复杂HTML表格的情况，可以使用html-to-xlsx：

npm install html-to-xlsx

示例：

import htmlToXlsx from 'html-to-xlsx';

async function exportHTMLTable() {
  const table = document.getElementById('my-table');
  const buffer = await htmlToXlsx(table);
  const blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
  saveAs(blob, 'table.xlsx');
}

注意事项

react实现表格导出