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上将不再起作用，并导致下载的文件名为“下载：失败-网络错误”，无法重试。奇怪的是，这些文件在Firefox和chrome上都可以正常下载。经过一些调查，它似乎与文件大小特别相关，而不是由于其他因素（例如网络请求时间）所致。也就是说，对于带有“下载” HTML属性的元素，我无法在chrome和最大尺寸附近找到任何结论性的信息。

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

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将下载文件显示为“失败-服务器问题”。它也不适用于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等这样的库可以帮助您实现这一目标。

从必须根据字符串长度而压缩的字符串创建可下载链接

1 个答案: