如何使用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文件而不是显示它，这对你不支持的浏览器没有任何帮助。）

Answer 2

这在最新的Chrome中不起作用，我修改了它，以下代码可以正常工作，

    $("#download_1").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 = '';

    if ($("#labels").is(':checked')) {
        var head = array[0];
        if ($("#quote").is(':checked')) {
            for (var index in array[0]) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[0]) {
                line += index + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }
    return str;
}

希望它会帮助别人:)

Answer 3

接受的较短版本（我的情况下必须使用unicode）

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

Answer 4

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

关于那个qazxsw poi有一个很好的讨论