纯前端实现表格数据导出为Csv格式数据

首先理解csv格式的文件，

• CSV即逗号分隔值（Comma-Separated Values，CSV），其文件以纯文本形式存储表格数据（数字和文本），文件的每一行都是一个数据记录。
• 每个记录由一个或多个字段组成，用逗号分隔。
• 使用逗号作为字段分隔符是此文件格式的名称的来源，因为分隔字符也可以不是逗号，有时也称为字符分隔值。
• CSV文件默认以英文逗号做为列分隔符，换行符作为行分隔符。
• 如果不提供网页形式只用命令行或二进制程序输出数据到CSV，只需要将数据段按,分割，行按\n分割，写入到一个.csv文件即可。

js实现

/**
 * @description 纯前端实现将表格数据导出为csv格式文件
 * @param {Array} headers 表格头配置项，headers中的key值与data中每一个item的属性名一一对应
 * @param {Array} data 表格数据
 * @param {String} fileName 导出的文件名称
 */
function downloadCsv(header, data, fileName = "导出结果.csv") {
  if (!header || !data|| !Array.isArray(header) || !Array.isArray(data) || !header.length || !data.length) {
    return;
  }
  var csvContent = 'data:text/csv;charset=utf-8,\ufeff';
  const _header = header.map(h => h.title).join(",");
  const keys = header.map(item => item.key);
  csvContent += _header + '\n';
  data.forEach((item, index) => {
    let dataString = '';
    for (let i = 0; i < keys.length; i++) {
      dataString += item[keys[i]] + ',';
    }
    csvContent += index < data.length ? dataString.replace(/,$/, '\n') : dataString.replace(/,$/, '');
  });
  const a = document.createElement('a');
  a.href = encodeURI(csvContent);
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(csvContent);
}

使用示例

let header = [
   { key: "order", title: "序号" },
   { key: "name", title: "姓名" },
   { key: "age", title: "年龄" },
   { key: "height", title: "身高" },
   { key: "address", title: "地址" },
 ],
 data = [
   {
     order: 1,
     name: "Abby",
     age: 23,
     height: 168,
     address: "北京，中关村",
   },
   {
     order: 2,
     name: "Leo",
     age: 28,
     height: 183,
     address: "上海，陆家嘴",
   },
   {
     order: 3,
     name: "Alen",
     age: 35,
     height: 178,
     address: "深圳，南山区",
   },
   {
     order: 4,
     name: "Daisy",
     age: 27,
     height: 160,
     address: "广州，天河区",
   },
 ];
 
downloadCsv(header, data, "人员信息表");

结果如下：

注意： 如果表格的内容有逗号分隔的，一定要将内容用双引号引起来，否则在导出的时候同一个单元格的内容会被分隔成多列的内容。