js中如何使用ajax的get來(lái)向后臺(tái)獲取文件流進(jìn)行文件下載（其中header中傳token參數(shù)）

js中如何使用ajax的get來(lái)向后臺(tái)獲取文件流進(jìn)行文件另存為的下載

其中header需要傳token和os參數(shù)到后臺(tái)進(jìn)行驗(yàn)證

請(qǐng)問(wèn)這個(gè)JS應(yīng)該如何寫？希望大神不吝賜教，謝謝~

如下方法后臺(tái)無(wú)法獲取header參數(shù)，360瀏覽器中也沒(méi)有啟動(dòng)另存為的窗口

var url = "{#$apiHost#}/aw/export?brand_ids="+brand_ids;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.setRequestHeader("token", "5f963175cc75613398e25ce2e5da56d7");
xhr.setRequestHeader("os", "1");
xhr.onload = function() {
    if (this.status == 200) {
        try{
            var elemIF = document.createElement("iframe");
            elemIF.src = this.responseURL;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
        }catch(e){
        }
    }
}
xhr.send();

回答

編輯回答

你的瞳

在瀏覽器環(huán)境下，JS不具備對(duì)本地文件進(jìn)行完全可控的讀寫能力。因此，如果可以的話，盡量讓后臺(tái)從GET的參數(shù)中獲取token等信息，然后返回文件流。前端只需要使用 a 標(biāo)簽和 download 屬性即可下載。

如果一定要從前端讀取文件流然后下載，可以使用 blob 對(duì)象實(shí)現(xiàn)。但是兼容性就無(wú)法保證了，blob對(duì)象只在 IE11 可用。

另外后臺(tái)收不到 header 可能是跨域問(wèn)題導(dǎo)致的，只要是帶自定義header的跨域請(qǐng)求，在發(fā)送真實(shí)請(qǐng)求前都會(huì)先發(fā)送OPTIONS請(qǐng)求，瀏覽器根據(jù)OPTIONS請(qǐng)求返回的結(jié)果來(lái)決定是否繼續(xù)發(fā)送真實(shí)的請(qǐng)求進(jìn)行跨域資源訪問(wèn)。

function export_raw(name, blob) {
    // name=文件名, blob=文件二進(jìn)制對(duì)象
    var urlObject = window.URL || window.webkitURL || window;
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(blob);
    save_link.download = name;
    fake_click(save_link);
}

function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
    );
    obj.dispatchEvent(ev);
}

2017年12月9日 03:05

編輯回答

執(zhí)念

改成這樣就好了。

var xhh = new XMLHttpRequest();
                xhh.open("post", Action.FILES_W_DOWNLOADFILE + "/"+ fileName );
                xhh.setRequestHeader("Authorization", this.Axios.defaults.headers.Authorization = JSON.parse(getCookie('userInfo')).tokenType+ ' ' + JSON.parse(getCookie('userInfo')).accessToken);
                xhh.setRequestHeader("Content-Type","application/json");
                xhh.responseType = 'blob';
                xhh.onreadystatechange = function () {
                    if (xhh.readyState === 4 && xhh.status === 200) {
                        var name = xhh.getResponseHeader("ajax-filename");
                        var mimeType = xhh.getResponseHeader("ajax-mimeType");
                        var blob = new Blob([xhh.response], {type: mimeType});
                        var csvUrl = URL.createObjectURL(blob);
                        var link = document.createElement('a');
                        document.body.appendChild(link); //創(chuàng)建的標(biāo)簽添加到body，解決Firefox下無(wú)法打開(kāi)頁(yè)面的問(wèn)題
                        link.href = csvUrl;
                        link.target = '_blank';
                        link.id = 'linkId',
                        link.className = 'linkId',
                        link.download = decodeURI(name);
                        document.getElementById("linkId").click();
                        // link.remove(); //將a標(biāo)簽移除
                        $('.linkId').remove()
                    }
                };
                xhh.send();

2017年3月24日 00:37

編輯回答

替身

經(jīng)過(guò)網(wǎng)上查閱資料，成功將header傳到了后臺(tái)，
現(xiàn)在的問(wèn)題是，后臺(tái)給我返回了文件流，請(qǐng)問(wèn)使用JS如何去自動(dòng)下載這個(gè)返回的文件流

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "{#$apiHost#}/aw/export?brand_ids="+brand_ids,
  "method": "GET",
  "headers": {"token": "5f963175cc75613398e25ce2e5da56d7","os": "1"}
}
$.ajax(settings).done(function (data) {
    console.log(data);
});

以上data就是返回的文件流，請(qǐng)問(wèn)如何正確使用JS來(lái)讓返回的文件流自動(dòng)下載呢？

2017年11月5日 13:42