web-dev-qa-db-ja.com

window.openを使用してファイル名を設定する方法

JavaScriptで計算された一時的な結果をダウンロードしようとしています。文字列strがあり、strを含むファイルをダウンロードして、data.csv、私は次のコードを使用しています：

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

ファイルは正常にダウンロードできますが、ファイルに名前を付けるにはどうすればよいですかdata.csv毎回手動で名前を設定するのではなく、自動的に？

javascriptdownloadwindow.open
42
huangcd

_<a>_要素のdownload属性を使用してこれを実現できます。例えば：

_<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_ファイルを表示せずにダウンロードさせようとすると、これは行われません。サポートされていないブラウザでも問題ありません。）

76
Jeremy Banks

最新の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
Jewel

受け入れられたものの短いバージョン（私の場合はユニコードを使用する必要がありました）

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

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
lucas.coelho