纯前端实现导出excel

背景

由于公司封装的客户端对导出插件(js-export-excel)不兼容，又不能更换其他导出插件。所以使用原生的方法，将表格数据转为csv，并以xls的格式导出。

csv （Comma Separated Values）

一种简单的文本文件格式，通常用于在不同应用程序和系统之间交换数据。

CSV文件由一系列逗号分隔的值组成

每行代表一个记录，每列代表一个字段。

CSV文件通常用纯文本编辑器打开并编辑，但也可以使用电子表格应用程序导入和导出。

• 数据格式

Name,Age,Gender
Alice,25,Female
Bob,30,Male
Charlie,35,Male

第一行是包含表头的行，它描述了每个字段的名称。后面的行包含实际的数据，每个字段之间使用逗号分隔。

XLS

XLS格式的数据是一个完成的电子表格

CSV和XLS格式的数据具有相同的结构

解决

1. 将数据格式转为CSV
2. 将CSV格式的字符串转为Blob对象，并创建一个URL指向该Blob对象
3. 将文件后缀设置为.xls

const exportToXls = (columns = [], dataSource = []) => {
    let paramData = dataSource;
    const title = columns.map(item => item.title);
    const keys = columns.map(item => item.key);
    const data = paramData.map((item, index) => ({...item, num: index + 1}));
    const dataStr = exportCsv(title, keys, data);
    let blob = new Blob(['\ufeff', dataStr]);
    let url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '请重命名.xls';
    a.click();
};

const exportCsv = (title = [], keys = [], sourceData = []) => {
    let arr = [title];
    sourceData.forEach(item => {
      let temp = [];
      keys.forEach(key => temp.push(item[key] ? `${item[key]}\t` : ''));
      arr.push(temp);
    })
    return arr.map(item => item.map(i => i + '').join(",")).join('\n')
  }

export {
    exportToXls,
}

反思

文件导出是一个十分常见的业务需求常见，在没有合适插件的情况下，需要灵活解决业务需求。

感谢同事，感谢各位阅读。