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

How to set a file name using window.open

本文关键字：设置 文件名 open window 何使用      更新时间：2023-09-26

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

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

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

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

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

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

你可以用download属性生成一个不可见的链接，然后用.click()代替window.open()。

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文件而不是显示它，这在不支持的浏览器中不会有任何好处。

这在最新的Chrome中不起作用，我已经修改了它，下面的代码将正常工作，

 $("#download_1").on('click', function() {
    var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
    var json = $.parseJSON(json_pre);
   
    var csv = JSON2CSV(json);
    var downloadLink = document.createElement("a");
    var blob = new Blob(["'ufeff", csv]);
    var url = URL.createObjectURL(blob);
    downloadLink.href = url;
    downloadLink.download = "data.csv";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});

当你点击download_1 id按钮时它会创建一个不可见的下载链接，然后点击它。我使用了另一个函数来准备js.

JSON2CSV函数如下:

function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var line = '';
    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
           line += array[i][index] + ',';
        }
        line = line.slice(0, -1);
        str += line + ''r'n';
    }
    return str;
}

希望对别人有所帮助

可接受的的较短版本(对于我来说必须使用unicode)

var link = document.createElement("a");
link.href = 'data:text/csv,' + encodeURIComponent("algún texto");
link.download = "Example.csv";
link.click();

IE的解决方案是使用msSaveBlob并传递文件名。

对于现代浏览器的解决方案是这样的，测试:IE11, FF &Chrome 

 var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
        //IE11 & Edge
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(csvData, exportFilename);
        } else {
            //In FF link must be added to DOM to be clicked
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(csvData);
            link.setAttribute('download', exportFilename);
            document.body.appendChild(link);    
            link.click();
            document.body.removeChild(link);    
        }

这里有一个很好的讨论

相关文章：