【JavaScript工具】CSV导出表格

• 导出表格
• { name, header, data }
• name 表格名称，非必须
• header 表头数据，必须，{ name[必须], key[必须], callback[非必须] }， callback(item) 回调函数中，item包含原始数据已经数据的序号, item = {raw, _index}
• data 表格数据，非必须

工具源码

// 提取表头数据
function extractHeader(header) {
  const title = [];
  const key = [];
  const callback = [];
  for (let i = 0; i < header.length; i++) {
    const item = header[i];
    if (item.name) title.push(item.name);
    if (item.key) key.push(item.key);
    if (item.key && item.callback) callback[item.key] = item.callback;
  }
  return { title, key, callback };
}

// 打印错误
function error(value) {
  console.log(value);
  return false;
}

// 返回表格名称
function getName(name) {
  if (name) {
    return name + ".csv";
  } else {
    return new Date().toISOString().substring(0, 10) + ".csv";
  }
}

// 处理数据
function handeData(raw, csvHead) {
  const csvData = [];
  for (let i = 0; i < raw.length; i++) {
    const cache = [];
    for (let j = 0; j < csvHead.key.length; j++) {
      const key = csvHead.key[j];
      // 若存在回调函数，则使用回调函数对数据进行处理，否则按key取值
      if (csvHead.callback[key])
        cache.push(csvHead.callback[key]({ raw: raw[i], _index: i }));
      else cache.push(raw[i][key] ?? "");
    }
    csvData.push(cache.join(",") + "\n");
  }
  return csvData;
}

// 下载文件
function downFile(csvName, csvData) {
  const csvURL =
    "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(csvData.join(""));
  let downloadLink = document.createElement("a");
  downloadLink.href = csvURL;
  downloadLink.download = csvName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

/*
 * 导出表格
 * { name, header, data, index }
 * name 表格名称，非必须
 * header 表头数据，必须，{ name[必须], key[必须], callback[非必须] }
 * >>>> callback(item) 回调函数中，item包含原始数据已经数据的序号, item = {raw, _index}
 * data 表格数据，非必须
 */
const exportCsv = function(params = {}) {
  // 表头必须传入
  if (!params["header"]) return error(`[EEROR]：没有传入表头！`);
  // 初始化表格数据
  const csvData = [];
  // 初始化表格名称
  const csvName = getName(params["name"]);
  // 初始化表头数据
  const csvHead = extractHeader(params["header"]);
  // 是否需要序号
  csvData.push(csvHead.title.join(",") + "\n");
  // 处理数据
  csvData.push(...handeData(params["data"], csvHead));
  // 处理文件
  downFile(csvName, csvData);
};

export default exportCsv;

使用例子

exportCsv({
  name: "",
  header: [{
  	name: "序号",
  	key: "index",
  	callback: item => {
  	  return item._index;
	}
  }],
  data: []
}};