ajax發送請求下載字節流形式的excel文件

背景

開發項目中導出功能，由於數據量有點大，因此導出可能須要時間有點長，因此想用ajax異步請求。html

存在問題

利用傳統的js和jquery提供的ajax相關獲取響應的方式是沒法實現excel文件下載的。jquery

js的XMLHttpRequest對象提供了responseText和responseXML兩個屬性，獲取的是html和xml文件格式，沒有提供二進制流獲取的方式。參考ajax

jquery提供了$.ajax()方法中返回的響應結果類型包括xml，html，script，json，jsonp，text，其中也沒有二進制流文件格式。參考json

解決辦法

原生開發

當原生開發的時候，就要依靠操做XMLHttpRequest對象來獲取響應的二進制流。通過百度我發現雖然這個對象沒有提供直接獲取流的屬性，可是它的文檔中responseType是能夠返回一個Blob對象的。而Blob對象就是一個二進制數據的對象，只要咱們獲取到這個對象，就能夠經過瀏覽器獲取到須要的excel文件。api

代碼：瀏覽器

$('.exportBtn').bind("click", function () {
    var method = 'post';//請求方法
    var url = 'http://localhost.....';//請求url
    var xhr = new XMLHttpRequest();//定義一個XMLHttpRequest對象
    xhr.open(method, url, true);
    xhr.responseType = 'blob';//設置ajax的響應類型爲blob
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.onload = function ()//當請求完成，響應就緒進入
    {
        if (this.status == 200)//當響應狀態碼爲200時進入
        {
            var blob = this.response;//獲取響應返回的blob對象
            //這一段用來判斷是不是IE瀏覽器，由於下面有些代碼不支持IE
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(blob, "NPI_PROJECT.xlsx");
                return;
            }
            var a = document.createElement('a');//在dom樹上建立一個a標籤
            var url = window.URL.createObjectURL(blob);//個人理解是生成一個相對於瀏覽器的虛擬url，用於指向傳入的blob對象，讓瀏覽器能夠經過這個url找到這個blob對象
            a.href = url;//將url賦值給a標籤的href屬性
            a.download = 'NPI_PROJECT.xlsx';//設置設置下載文件的名稱
            a.click();//主動觸發a標籤點擊事件
        }
    };
    xhr.send(JSON.stringify({
        name: '',
        status: ''
    }));//附帶參數發送請求
});

　　jquery插件開發 -->jquery.fileDownload

　　用這個插件是最簡單的app

$('.exportBtn').bind("click", function () {
    var httpMethod = 'post';
    var url = "http://localhost.....";
    var params = {
        name: '',
        status: ''
    };
    $.fileDownload(url, {
        httpMethod: httpMethod,
        // 由於這個插件貌似只支持URL參數,因此要用jquery param將js對象轉成URL參數
        data: $.param(params),
        prepareCallback: function (url) {
            console.log("正在導出...");
        },
        //要想成功回調失敗和成功方法，要在響應首部加 response.setHeader("Set-Cookie", "fileDownload=true; path=/");
        successCallback: function (url) {
            console.log("導出成功");
        },
        failCallback: function (html, url) {
            console.log("導出失敗");
        }
    })

tips：dom

1.若是成功失敗回調函數沒有生效，必定要確認響應首部是否添加成功。由於我遇到一個狀況，我先寫響應流，而後添加首部發現沒有添加成功。 jquery插件

2.fileDownload的data參數貌似只支持URL格式參數（如name=1&age=12）,我嘗試傳json和js對象都沒有成功。並且控制器不要使用@Requestbody接受參數，由於這個註解只接受請求體中的JSON格式參數。異步

參考

jquery.param文檔

jquery.fileDownload問答