前端用JavaScript导出Excel表格的方法

在前端开发中，实现将数据导出为Excel表格是一个常见的需求。JavaScript提供了多种方式来达成这一目标，本文将介绍几种常用的方法。

基于 xlsx 库

xlsx 是一个功能强大的JavaScript库，它支持多种文件格式的解析与生成，包括Excel。需要使用npm或yarn安装该库：npm install xlsx --save。

安装完成后，在项目中引入它。假设我们有一个简单的数据数组，要将其导出为Excel表格：

import XLSX from 'xlsx';

const data = [
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' }
];

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, 'data.xlsx');

这段代码首先将JSON数据转换为工作表，然后创建一个新的工作簿，将工作表添加到工作簿中，最后使用 writeFile 方法将工作簿写入文件。

使用 FileSaver.js 结合 xlsx

FileSaver.js 是一个用于在浏览器中保存文件的库。结合 xlsx 库，可以更好地控制文件的保存过程。

首先安装 FileSaver.js：npm install file-saver --save。

然后在代码中引入并使用：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

const data = [
  { name: '王五', age: 28, city: '广州' },
  { name: '赵六', age: 32, city: '深圳' }
];

const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

const wopts = { bookType: 'xlsx', type: 'array' };
const wbout = XLSX.write(workbook, wopts);

const blob = new Blob([wbout], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, 'newData.xlsx');

这段代码通过 XLSX.write 方法将工作簿转换为数组形式的数据，然后创建一个Blob对象，最后使用 FileSaver.saveAs 方法将文件保存到本地。

原生JavaScript方法

在一些简单场景下，也可以使用原生JavaScript来导出CSV格式的文件，虽然严格来说CSV并不完全等同于Excel表格，但大部分电子表格软件都能很好地支持它。

const data = [
  { name: '孙七', age: 26, city: '成都' },
  { name: '周八', age: 31, city: '杭州' }
];

let csvContent = 'data:text/csv;charset=utf-8,';
const headers = Object.keys(data[0]);
csvContent += headers.join(',') + '\n';

data.forEach(row => {
  const values = headers.map(header => row[header]);
  csvContent += values.join(',') + '\n';
});

const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

这种方法通过构建CSV格式的字符串，将其转换为URL，然后创建一个链接元素来触发文件下载。

前端使用JavaScript导出Excel表格有多种方式，开发者可以根据项目的具体需求和复杂度选择合适的方法。