前端處理二進位流數據--轉下載

前端處理二進位流數據--轉下載

導言

​ 因業務需要，實現分類導出功能。篩選導出一定條件的數據，後端處理成Excle數據流，前端實現導出下載。

實現

方法一

​ 將條件格式化成key=value&...文本格式，接到<a>標簽url介面之後，每當點擊導出按鈕的時候，創建一個<a>標簽，寫入介面地址+傳入數據，JS點擊。最後移除<a>標簽。

代碼如下：

//導出按鈕點擊事件
$('#export').click(function(){
    
    //獲取查詢條件value
    //構造鍵值對
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    //這裡利用了jQuery的內置方法，將其轉換成key=value&...文本格式
    paramData = jQuery.param(paramData);
    //創建一個新的<a>標簽
    var a = document.createElement('a');
    //匹配介面+數據
    a.href = '/ba/baRecord/exportExcel?'+paramData;
    //點擊<a>
    a.click();
    //此時，實際應用中，已經跳轉下載
    //移除<a>標簽
    a.remove();
});

方法二

​ 使用原生JS創建POST請求，傳入數據，將得到的數據流用Blob（Binary Large Objects）處理。這個方法本人實現無果，歡迎指導。

代碼如下：

//導出按鈕點擊事件
$('#export').click(function(){
    //獲取查詢條件value
    //構造鍵值對
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    //利用jQuery的內置方法，將其轉換成key=value&...文本格式
    paramData = jQuery.param(paramData);
    /*
    	解釋：
    		這裡使用key=value&...文本格式是因為在後端處理傳入數據時，需要文本格式。
    		另一個查詢介面亦使用同一個數據接收類，同樣傳入此類型文本格式，因此延用。
    */
	//創建請求
    let xhr = new XMLHttpRequest();
    //規定請求類型，介面，是否同步
    xhr.open('post','/ba/baRecord/exportExcel',true);
    //規定響應類型為blob  !important
    xhr.responseType = 'blob';
	//發送請求數據
    xhr.send(paramData);
	//請求完成
    xhr.onload  = function (){
    	//當請求狀態碼為200時
        if(this.status === 200){
			//用blob對象接收返回的二進位數據
            let blob = new Blob([this.response])
            //創建<a>標簽
            let a = document.createElement('a')
            //此時blob暫存在記憶體中，傳入url
            a.href = URL.createObjectURL(blob);
            //規定下載
            a.setAttribute("download", "data.xls");
            //點擊
            a.click();
            //釋放
            URL.revokeObjectURL(a.href);
        }
    }
});  
/*
	這個方法，後端接收不到傳入數據，因此每次點擊事件時總是導出全部數據。
	若傳入數據就是js對象格式時，亦然。
	若傳入數據是json格式時，
	paramData = JSON.stringify(paramData);
	亦然。
	望指導。
*/

方法三

​ 使用原生jQuery創建POST請求，傳入數據，將得到的數據流用Blob（Binary Large Objects）處理。這個方法本人實現亦無果。

//導出按鈕點擊事件
$('#export').click(function(){
    
    //獲取查詢條件value
    //構造鍵值對
    var paramData = {key1:value1,key2:value2,key3:value3,key4:value4};
    $.ajax({
        type: "POST",
        url: '/ba/baRecord/exportExcel',
        /*
        	jQuery內置會判斷傳入數據類型，當我們未定義content-type時，預設使用string格式，
        	如果傳入的paramData不是string格式，會調用jQuery.param()方法，將其格式化。
        */
        data: paramData,
        //預設響應數據為binary
        dataType: 'binary',
        //規定響應類型為blob  !important
        xhrFields: { responseType: "blob" },
        success: function (res) {
            // res 為二進位流
			//用blob對象接收返回的二進位數據
            let blob = new Blob([res])
            //創建<a>標簽
            let a = document.createElement('a')
            //此時blob暫存在記憶體中，傳入url
            a.href = URL.createObjectURL(blob);
            //規定下載
            a.setAttribute("download", "data.xls");
            //點擊
            a.click();
            //釋放
            URL.revokeObjectURL(a.href);
        }
    });
});

/*
	這個方法後臺能接收到數據，請求狀態碼200，瀏覽器響應結果預覽為亂碼。但是不會轉到下載，即未進行	到success方法。
	測試
	complete: function (XMLHttpRequest, status) {
        console.log(XMLHttpRequest, status)；
    }
    返回error
    無果
*/

//遂使用
statusCode: {
    200:function (res) {
        let blob = new Blob([res])
        let a = document.createElement('a')
        a.href = URL.createObjectURL(blob);
        a.setAttribute("download", "data.xls");
        a.click();
        URL.revokeObjectURL(a.href);
    }
}
/*
	亦無果，望指導
*/