JS處理文件流（如果是圖片，顯示在當前頁面）

用ajax請求圖片資源，服務器以文件流的形式返回。

1、返回類型需要設置爲“blob”，所以需要用原生ajax，不能使用jq（原因：jquery將返回的數據轉換爲了string，不支持blob類型）（當然，你也可以引入組件拓展jq的能力，我知道的有一個：jquery-ajax-blob-arraybuffer.js）；

2、使用FileReader將文件流轉換成base64格式；

3.1、然後通過模擬點擊a標籤下載該文件；

3.2、或者可以設置在img元素的src屬性上，在當前頁面顯示出來。

 

3.1代碼：

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式，根據接口
  xhr.responseType = "blob";  // 返回類型blob
  // 定義請求完成的處理函數，請求前也可以增加加載框/禁用下載按鈕邏輯
  xhr.onload = function () {
    // 請求完成
    if (this.status === 200) {
      // 返回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 = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修復firefox中無法觸發click
        a.click();
        $(a).remove();
      }
    }
  };
  // 發送ajax請求
  xhr.send()

3.2代碼：

            var xhr = new XMLHttpRequest();
            xhr.open('POST', CONTACT_ACTION_FILES_DOWNLOAD, true);
            xhr.setRequestHeader("Accept", "application/json;q=0.5");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            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 () {
                        $("#imgTest").attr("src", reader.result);
                    }
                }
            };
            // 發送ajax請求
            xhr.send("filePath=" + filePath);