Как установить имя файла с помощью window.open - PullRequest
Новая
       26

Как установить имя файла с помощью window.open

42 голосов
/ 12 августа 2011

Я пытаюсь загрузить временный результат, рассчитанный с помощью JavaScript. Скажем, у меня есть строка str, я хочу скачать файл, содержащий str и названный им как data.csv, я использую следующий код: 

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

Файл может быть успешно загружен, но как я могу назвать файл data.csv автоматически, а не устанавливать имя вручную каждый раз?

Ответы [ 4 ]

75 голосов
/ 12 августа 2011

Этого можно добиться, используя атрибут download для элементов <a>. Например: 

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

Этот атрибут указывает, что файл должен быть загружен (а не отображается, если применимо) и указывает, какое имя файла следует использовать для загруженного файла.

Вместо использования window.open() вы можете создать невидимую ссылку с атрибутом download и .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);

К сожалению, это поддерживается не во всех браузерах, но добавление не ухудшит ситуацию в других браузерах: они продолжат скачивать файлы с бесполезными именами файлов. (Предполагается, что вы используете тип MIME, который пытается загрузить их браузер. Если вы пытаетесь позволить пользователю загрузить файл .html вместо его отображения, это не принесет вам никакой пользы в неподдерживаемых браузерах.)

21 голосов
/ 09 июля 2014

Это не работает в последнем 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, он создает невидимую ссылку для загрузки и нажимает ее Я использовал другую функцию для подготовки 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;
}

Надеюсь, это поможет другим:)

6 голосов
/ 26 мая 2018

Более короткая версия принятого (для моего случая пришлось использовать юникод) 

var link = document.createElement("a");
link.href = 'data:text/csv,' + encodeURIComponent("algún texto");
link.download = "Example.csv";
link.click();
6 голосов
/ 26 октября 2016

Решением для 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);    
        }
* 1005хорошее рассуждение об этом здесь
...