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

【问题标题】：How to download CSV using a href with a # (number sign) in Chrome?如何在 Chrome 中使用带#（数字符号）的 href 下载 CSV？
【发布时间】：2019-03-20 17:43:59
【问题描述】：

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 字符

【问题讨论】：

标签： javascript csv google-chrome data-uri

【解决方案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 控制台窗口中，它会按预期工作。

【讨论】：