前端导出excel怎么实现

前端导出 Excel 通常使用两种方式：

基于浏览器内置的 API：可以使用浏览器内置的 Blob 和 URL 对象来实现，具体步骤如下：

将数据转换为 CSV 格式；
使用 Blob 对象创建一个二进制数据对象；
使用 URL 对象生成一个 URL 地址；
创建一个 a 标签，设置 href 属性为 URL 地址，download 属性为文件名，触发点击事件，实现下载。

基于第三方库：例如 js-xlsx 库，使用该库可以直接将 JSON 数据转换为 Excel 文件，具体步骤如下：

引入 js-xlsx 库；
将数据转换为 JSON 格式；
调用库中的方法将 JSON 数据转换为 Excel 文件；
使用 Blob 和 URL 对象实现下载。

示例代码（基于浏览器内置的 API）：

function exportExcel(data, fileName) {
  const csv = convertToCSV(data); // 将数据转换为 CSV 格式
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); // 创建二进制数据对象
  const url = URL.createObjectURL(blob); // 生成 URL 地址
  const link = document.createElement('a'); // 创建 a 标签
  link.setAttribute('href', url);
  link.setAttribute('download', fileName);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click(); // 触发点击事件，实现下载
  document.body.removeChild(link);
}

function convertToCSV(data) {
  const rows = [];
  for (let i = 0; i < data.length; i++) {
    rows.push(data[i].join(','));
  }
  return rows.join('\n');
}

const data = [['姓名', '年龄'], ['张三', 18], ['李四', 20]];
const fileName = 'test.csv';
exportExcel(data, fileName);

示例代码（基于 js-xlsx 库）：

function exportExcel(data, fileName) {
  const worksheet = XLSX.utils.json_to_sheet(data); // 将数据转换为 Excel 文件
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  const blob = new Blob([s2ab(XLSX.write(workbook, { type: 'binary' }))], { type: 'application/octet-stream' }); // 创建二进制数据对象
  const url = URL.createObjectURL(blob); // 生成 URL 地址
  const link = document.createElement('a'); // 创建 a 标签
  link.setAttribute('href', url);
  link.setAttribute('download', fileName);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click(); // 触发点击事件，实现下载
  document.body.removeChild(link);
}

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xff;
  }
  return buf;
}

const data = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
const fileName = 'test.xlsx';
exportExcel(data, fileName);