下載文件的Restful接口的前端實現

背景介紹

　　后端是springboot框架，接口是restful風格接口，需求是異步實現一個文件下載，該文件是動態生成的，以流的方式返回給前端。存在的問題是，ajax不支持post方式傳參數，並觸發瀏覽器下載文件。經過多方調研，JavaScript原生XMLHttpRequest()對象可以實現。這里呈現主要的前端代碼，以供參考，具體請參考XMLHttpRequest()的API文檔介紹https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest。

實現代碼

1、實現函數方法

function download(options) {
        var xhr = new XMLHttpRequest();//創建新的XHR對象
        xhr.open(options.method, options.url);//指定獲取數據的方式和url地址
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
        xhr.responseType = 'blob';//以blob的形式接收數據，一般文件內容比較大
        // 定義請求完成的處理函數，請求前也可以增加加載框/禁用下載按鈕邏輯
        xhr.onload = function () {
            // 請求完成
            if (this.status === 200) {
                // 請求成功
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);    // 轉換為base64，可以直接放入a表情href
                reader.onload = function (e) {
                    // 轉換完成，創建一個a標簽用於下載
                    var a = document.createElement('a');
                    a.download = 'backendCode.zip';//下載的文件名
                    a.href = e.target.result;
                    $("body").append(a);    // 修復firefox中無法觸發click
                    a.click();
                    $(a).remove();
                }
            }
        };
        xhr.send(options.data); //post請求傳的參數
    }

2、參數設置

var options = {
                url: '/geneCode',  //下載地址
                data: requestDataStr, //要發送的數據
                method: 'post'//post方式發送數據
            };

3、數據對象。

數據對象需要轉換成字符串類型，后端才可以反序列化，映射到指定的javabean。

var javaBean = {
                author: “Eric”
            }
var requestDataStr = JSON.stringify(javaBean);    

結果

　　在觸發下載的函數中，引用該函數，即可實現post方式異步下載文件，觸發瀏覽器的文件下載過程。