如何使用window.open设置文件名 [英] how to set a file name using window.open

问题描述

我试图下载由javascript计算的临时结果。说我有一个字符串 str ，我想下载包含 str 的文件，并将其命名为 data.csv ，我使用以下代码：

  window.open（'data ：text / csv; charset = utf-8，'+ str）; 
  

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

谢谢！

解决方案

文件名可以通过HTTP头建议，但没有标准机制与数据URI或 window.open 。

有在下载生成的数据时指定文件名的方法，但是AFAIK没有任何支持多个浏览器。

其中一种方式是下载属性< a> ; 元素。例如：

 < a href =1251354216241621.txtdownload =your-foo.txt> FOO< / A> 
  

此属性表示应该下载该文件（而不是显示，如果适用），并指定哪个文件名应该用于下载的文件。

而不是使用 window.open（），您可以生成一个不可见的链接，下载属性和 .click（）。

  var str =Name，Price\\\
Apple，2\\\
Orange，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 文件显示它，这不会对您不受支持的浏览器有任何好处。）

I'am trying to download temporary result calculated by javascript. Say I have a string str, I want to download a file contains str and named it as data.csv, I'm using the following code:

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

OK, the file can be successfully downloaded, but how can I name the file data.csv automatically rather than set the name each time by hand?

Thank you!

解决方案

File names can be suggested through HTTP headers, but there's no standard mechanism accomplishing the same thing with data URIs or window.open.

There are some ways to specify a filename when downloading generated data, but AFAIK there aren't any that are supported in multiple browsers.

One of these ways is the new download attribute for <a> elements. For example:

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

This attribute indicates that the file should be downloaded (instead of displayed, if applicable) and specifies which filename should be used for the downloaded file.

Instead of using window.open() you could generate an invisible link with the download attribute and .click() it.

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);

Unfortunately this isn't supported in all browsers, but adding it won't make things worse for other browsers: they'll continue to download the files with useless filenames. (This assumes that you're using a MIME type is that their browser attempts to download. If you're trying to let the user download an .html file instead of displaying it, this won't do you any good in unsupported browsers.)

这篇关于如何使用window.open设置文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！