JavaScript实现导出excel

JavaScript实现导出excel

使用JavaScript可以通过多种方式导出Excel文件，其中一种常用的方法是将数据转换为CSV格式并在浏览器中创建一个下载链接。具体步骤如下：

1. 将数据格式化为CSV字符串，每行数据以换行符分隔，每个单元格以逗号分隔。
2. 创建一个Blob对象并将CSV字符串作为其内容，设置MIME类型为"application/csv"或"text/csv"。
3. 使用URL.createObjectURL()方法将Blob对象转换为一个URL。
4. 在HTML页面中创建一个元素，并将其href属性设置为步骤3中的URL，将download属性设置为导出的文件名（带有.csv扩展名）。
5. 触发元素的click事件以启动下载。

以下是代码示例片段

function exportToExcel(data, fileName) {
  const csv = convertToCSV(data); // 将数据转换为CSV格式
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); // 创建Blob对象
  const url = URL.createObjectURL(blob); // 转换为URL
  const link = document.createElement('a'); // 创建<a>元素
  link.setAttribute('href', url);
  link.setAttribute('download', `${fileName}.csv`);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click(); // 触发下载
  document.body.removeChild(link); // 清理
}

function convertToCSV(data) {
  const rows = [];
  for (let i = 0; i < data.length; i++) {
    const row = [];
    for (let j = 0; j < data[i].length; j++) {
      row.push(`"${data[i][j]}"`); // 将每个单元格格式化为带引号的字符串
    }
    rows.push(row.join(',')); // 将每行数据连接为一个字符串
  }
  return rows.join('\n'); // 将所有行数据连接为一个字符串
}

调用示例

const data = [
  ['Name', 'Age', 'Gender'],
  ['John', '30', 'Male'],
  ['Jane', '25', 'Female']
];

exportToExcel(data, 'my_data'); // 导出文件名为“my_data.csv”的Excel文件