如何在 Chrome 中使用带有 #（数字符号）的 href 下载 CSV？

Question

Chrome 72+ 现在在 # 字符的第一个符号处截断我们的数据。

https://bugs.chromium.org/p/chromium/issues/detail?id=123004#c107

我们一直在使用临时锚标记以及带有 csv 字符串的下载属性和 href 属性，以将页面上的 csv 数据下载到用户的机器上。这在最近的 Chrome 更新中被破坏了，因为第一个 # 号之后的所有数据都从下载的 csv 中删除。

我们可以通过用“num”或其他数据替换 # 来解决这个问题，但这会使我们的 csv/excel 文件具有我们希望避免的不同数据。

我们可以做些什么来防止chrome在下载文件时剥离href中的数据？

let csvContent = "data:text/csv;charset=utf-8,";
let header = "Col1, Col2, Col3";
csvContent += header + "\r\n";
csvContent += "ac, 123, info here" + "\r\n";
csvContent += "dfe, 432, #2 I break" + "\r\n";
csvContent += "fds, 544, I'm lost due to previous number sign";

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "file.csv");
document.body.appendChild(link);
link.click();

我尝试用足够接近#的 unicode 字符替换?，并且在 CSV 中看起来不错，但 Excel 不喜欢 unicode 字符

Answer 1

我遇到了同样的问题，我所做的唯一改变是保持"data:text/csv;charset=utf-8,"未编码并结束 CSV 数据部分并使用encodeURIComponent而不是encodeURI这样：

let prefix = "data:text/csv;charset=utf-8,";
let header = "Col1, Col2, Col3";
let csvContent = header + "\r\n";
csvContent += "ac, 123, info here" + "\r\n";
csvContent += "dfe, 432, #2 I break" + "\r\n";
csvContent += "fds, 544, I'm lost due to previous number sign";

var encodedUri = prefix + encodeURIComponent(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "file.csv");
document.body.appendChild(link);
link.click();

将其复制并粘贴到 Chrome 控制台窗口中，它会按预期工作。