HTML5 Blobによるファイルダウンロード機能のサンプルコード

$("#exportAll").on("click",function(){ //click [export all])
    //layer.load();
    var province = $('#operatingData select[name=\'province\'] option:selected').val(); //query condition (province)
    var city = $('#operatingData select[name=\'city\'] option:selected').val(); //query condition (city)

    var url = '/xxx/excelAllDownload'; //[export all] request url
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.responseType = "blob"; //return type blob
    xhr.onload = function () { //define the request completion handler
        //layer.closeAll('loading');
        if (this.status === 200) {
            var blob = this.response;
            var reader = new FileReader();
            reader.readAsDataURL(blob); // convert to base64, can be put directly into a tag href
            reader.onload = function (e) {
                var a = document.createElement('a'); // conversion complete, create an a tag for downloading
                a.download = 'XX data.xlsx';
                a.href = e.target.result;
                $("body").append(a); // Fix the inability to trigger the click in firefox
                a.click();
                $(a).remove();
            }
        }else if(this.status === 504){
            alert('Export failed, request timed out');
            //layer.msg('Export failed, request timed out', {icon: 2});
        }else{
            alert('Export failed');
            //layer.msg('Export failed', {icon: 2});
        }
    };
    xhr.send("province=" + province + "&city=" + city);
})

$("#exportAll").on("click",function(){ //click [export all])
    var url = '/xxx/excelAllDownload'; //[exportAll] request url
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.responseType = "blob"; //return type blob
    xhr.onload = function () { //define the request completion handler
        if (this.status === 200) {
            //Way one implements static file download, can't customize download file name
            //location.href = "json/abc.xlsx"; //this.response (the path to the static file returned on the server)

            // way two to achieve a static file download, you can customize the download file name
            var a = document.createElement('a'); //create a tag for downloading
            a.download = 'XXX data.xlsx';
            a.href = "json/abc.xlsx"; //this.response (the path to the static file on the returned server)
            $("body").append(a); // Fix the inability to trigger the click in firefox
            a.click();
            $(a).remove();
        }else if(this.status === 504){
            alert('Export failed, request timed out');
        }else{
            alert('Export failed');
        }
    };
    xhr.send();
})