从字符串创建可下载的 link，由于字符串长度必须压缩

Question

我有一个字符串 (~2MB)，代表我需要在页面上下载的 CSV。这就是我使字符串可下载的方法，它适用于较小的文件。

const csvContentEncoded = encodeURIComponent("data:text/csv;charset=utf-8," + csvContent);

const element = document.createElement("a");
element.setAttribute("href", csvContentEncoded);
element.setAttribute("download", "filename.csv");
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

但是对于大约 (~2MB) 的文件，这不再适用于 Chrome 并导致下载的文件标题为 "download: Failed - Network error"，无法重试。奇怪的是，这些在 firefox 和 chrome 上下载得很好。经过一些调查，它似乎与文件大小特别相关，而不是由于其他因素（例如网络请求时间）。也就是说，我还没有找到关于 chrome 和具有 "download" HTML 属性的元素的最大大小的任何结论。

我现在尝试在元素上设置之前压缩内容。这是我的代码：

const zip = zlib.deflateSync("data:text/csv;charset=utf-8," + csvContent).toString("base64");
const csvContent = encodeURIComponent(zip);
const element = document.createElement("a");
element.setAttribute("href", csvContent);
element.setAttribute("download", "filename.csv"); // should I be changing this to a .zip or something?

element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

但这行不通。 Chrome 将下载文件显示为 "Failed - Server problem"。它也不适用于 Safari 的 Firefox。

Answer 1

尝试使用 blob。使用 blob，您可以下载几 MB 到 GB 的文件，具体取决于您使用的浏览器。

const csvData = new Blob([csvContent], { type: 'text/csv' }); 
const csvUrl = URL.createObjectURL(csvData);
const element = document.createElement("a");
element.setAttribute("href",csvUrl);
element.setAttribute("download", "filename.csv");
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

还有一些库可以帮助您实现这一点，例如 StreamSaver、FileSaver 等。

从字符串创建可下载的 link，由于字符串长度必须压缩

Creating a downloadable link from a string that must be compressed due to string length

html

javascript

zlib

download