javascript - 如何使用 window.open 设置文件名

Question

我正在尝试下载由 JavaScript 计算的临时结果。假设我有一个字符串 str，我想下载一个包含 str 的文件并将其命名为 data.csv，我正在使用以下内容代码:

window.open('data:text/csv;charset=utf-8,' + str);

文件可以成功下载，但是如何自动命名文件data.csv而不是每次都手动设置名称？

Answer 1

您可以使用 download 来实现此目的<a> 的属性元素。例如:

<a href="1251354216241621.txt" download="your-foo.txt">Download Your Foo</a>

此属性指示应下载文件(而不是显示文件，如果适用)并指定下载文件应使用哪个文件名。

而不是使用 window.open()您可以生成一个不可见的链接 download属性和.click()它。

var str = "Name, Price\nApple, 2\nOrange, 3";
var uri = 'data:text/csv;charset=utf-8,' + str;

var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.csv";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

不幸的是，并非所有浏览器都支持此功能，但添加它不会使其他浏览器的情况变得更糟:它们将继续下载具有无用文件名的文件。 (这假设您使用的 MIME 类型是他们的浏览器尝试下载的。如果您试图让用户下载 .html 文件而不是显示它，这不会给您带来任何好处在不受支持的浏览器中。)