使用带有Unicode字符的JavaScript为Excel生成CSV

Question

我正在尝试使用javascript在客户端生成CSV文件。我跟着the answer on this stackoverflow question。我在内容中有unicode字符（在我的例子中是希伯来字符）。

文件生成成功，但是当我在Excel中打开文件时 - 所有unicode字符都显示为有趣的字符。 ASCII字符（英文和数字）很好地呈现。

奇怪的是，如果我在记事本中打开文件，unicode字符就会显示出来。所以我想这与Excel以及我保存文件的方式有关。

有什么想法吗？

Answer 1

根据Jack Cole的评论和this question，解决我的问题的原因是在文件的开头添加了BOM前缀（\uFEFF）。

这是工作代码：

var csvContent = "...csv content...";
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,\uFEFF" + encodedUri);
link.setAttribute("download","report.csv");
link.click();

Answer 2

在Node / Express服务器上，我尝试了Shay的回答，但是我的标题中的无效字符出现错误。相反，我将\uFEFF添加到了回复正文的开头并且有效。

app.get('/', function (req, res) {
    var csv = Papa.unparse(...);
    res.set({
       'Content-Type': 'text/csv; charset=UTF-8',
       'Content-Disposition': 'attachment; filename="file.csv"',
    });
    res.send('\uFEFF' + csv)
})

Answer 3

建议的解决方案并不适用于所有浏览器，但我找到了一种方法可以让它在所有浏览器中运行（Chrome，Firefox，IE11甚​​至Edge，...不了解IE9- 10，因为我再也无法访问它们了。

我必须使用外部库对encoding.js进行编码，并且使用unicode效果非常好（我可以在Excel导出的Excel中看到我的独角兽表情符号）。

所以这里是代码

data = new TextEncoder('utf-16be').encode(csvContent);

// create a Blob object for the download
const blob = new Blob(['\uFEFF', data], {
  type: 'text/csv;charset=utf-8';
});

// when using IE/Edge, then use different download call
if (typeof navigator.msSaveOrOpenBlob === 'function') {
  navigator.msSaveOrOpenBlob(blob, filename);
} else {
  // this trick will generate a temp <a /> tag that you can trigger a hidden click for it to start downloading
  const link = document.createElement('a');
  const csvUrl = URL.createObjectURL(blob);

  link.textContent = 'download';
  link.href = csvUrl;
  link.setAttribute('download', filename);

  // set the visibility hidden so there is no effect on your web-layout
  link.style.visibility = 'hidden';

  // this part will append the anchor tag and remove it after automatic click
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

就是这样，它适用于IE / Edge / Chrome / Firefox