CSVファイルをダウンロードしたい

投稿者: Anonymous
@RequestMapping(value = "/download", method = RequestMethod.GET)
public ResponseEntity<byte[]> download() throws IOException {
    HttpHeaders h = new HttpHeaders();
    h.add("Content-Type", "text/csv; charset=MS932");
    h.setContentDispositionFormData("filename", "hoge.csv");
    return new ResponseEntity<>("あ,い,う,え,お".getBytes("MS932"), h, HttpStatus.OK);
}

http://blog.okazuki.jp/entry/2015/07/18/220959
上記サイト様を見ますと、これでCSVファイルをダウンロードできるようにうかがえますが、
new ResponseEntity<>(“あ,い,う,え,お”.getBytes(“MS932”), h, HttpStatus.OK)
上記の時点で、”あ,い,う,え,お”を書き込んだ”hoge.csv”というファイルをローカル(Windowsのダウンロードディレクトリなど)
にダウンロードするということなのでしょうか。

試しに上記をjavascriptで呼んでみたのですが、
結果ブラウザに”あ,い,う,え,お”と表示されるのみとなりました。
CSVファイルなどをローカルにダウンロードする場合どのようにすべきなのでしょうか。

javascript側

  $.ajax({
        type:"post",
        url:"/download",
        contentType: 'application/json',
        dataType: "html"
    }).done(function(responseData, status, jqXHR) {
    }).fail(function(responseError, status, errorThrown) {
    });

解決

ファイルがダウンロードできるかどうか確認したい、ということであれば、Webブラウザで
http://localhost:8080/download (※デフォルト設定の場合)
へアクセスすれば良いです。

Javascriptを利用してダウンロードしたい、ということであれば、例えば

に書かれているような形で可能でしょう。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/download', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
    var blob = new Blob([this.response]);
    var url = window.URL || window.webkitURL;
    var blobURL = url.createObjectURL(blob);

    var a = document.createElement('a');
    a.download = "hoge.csv";
    a.href = blobURL;
    a.click();  
};

xhr.send();

その他参考:

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *