как задать имя файла с помощью окна.открыть

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

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

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

спасибо!

38
download javascript window.open

4 ответов

вы можете достичь этого, используя на <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 файл вместо его отображения, это не принесет вам никакой пользы в неподдерживаемых браузерах.)

65

это не работает в последнем 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;
}

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

21

решением для 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);    
        }

есть хорошая дискуссия об этом здесь

6

более короткая версия accepted one (для моего случая пришлось использовать unicode)

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