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

Question

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

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

我们一直在使用临时锚标记以及 download 属性和 href 属性以及 csv 字符串将页面上的 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 控制台 window，它会按预期工作。

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

How to download CSV using a href with a # (number sign) in Chrome?

javascript

csv

google-chrome

data-uri