javascript - 如何在 Javascript 中使用自定义文件名创建分号分隔的 CSV？

Question

Stack Overflow 上有大量有关如何使用 Javascript 创建 CSV 文件的信息。但我正在努力寻找一种方法来创建分号分隔的数据并能够在下载时设置文件名。

下面是我的代码的简化版本。最后几行说明了问题:带冒号的 CSV 效果很好。带分号的 CSV 失败，浏览器将无法下载该文件(Chrome 显示“网络错误”)。

const arrayToCsvFile = (dataArray, delimiter, filename) => {
  const csv = createCsv(dataArray, delimiter);
  exportCsvToFile(csv, filename, delimiter);
};

const createCsv = (rows, delimiter) => {
  let returnStr = "";
  rows.forEach(row => {
    row.forEach(field => {
      returnStr += field + delimiter;
    });
    returnStr += "\r\n";
  });
  return returnStr;
};

const exportCsvToFile = (csvData, filename, delimiter) => {
  csvData = "data:text/csv;charset=utf-8" + delimiter + csvData;
  const encodedUri = encodeURI(csvData);
  // Trick to set filename
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", filename);
  document.body.appendChild(link); // Required for Firefox(?)
  link.click();
};


const testData = [["a", "b", "c"], ["1", "2", "3"]];

// Line below works
// arrayToCsvFile(testData, ",", "myCustomFileNameWithCommaSep.csv");

// This does not work - browser fails to download file.
arrayToCsvFile(testData, ";", "myCustomFileNameWithSemiSep.csv");

Answer 1

查看 data URI scheme 的定义.

data:[<media type>][;base64],<data> 

…
The data, separated from the preceding part by a comma (,).

现在看看你的代码:

csvData = "data:text/csv;charset=utf-8" + delimiter + csvData;

您将在 CSV 中重复使用您在数据 URI 中使用的分隔符，但分隔的数据 URI必须是逗号!

在那里使用逗号:

csvData = "data:text/csv;charset=utf-8," + csvData;