vue.js 使用axios實現下載功能

Ajax沒法下載文件的緣由

瀏覽器的GET(frame、a)和POST(form)請求具備以下特色：

    response會交由瀏覽器處理
    response內容能夠爲二進制文件、字符串等

Ajax請求具備以下特色：

    response會交由Javascript處理
    response內容僅能夠爲字符串

所以，Ajax自己沒法觸發瀏覽器的下載功能。
Axios攔截請求並實現下載

爲了下載文件，咱們一般會採用如下步驟：

    發送請求
    得到response
    經過response判斷返回是否爲文件
    若是是文件則在頁面中插入frame
    利用frame實現瀏覽器的get下載

咱們能夠爲axios添加一個攔截器：

 import axios from 'axios'
     
    // download url
    const downloadUrl = url => {
      let iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = url
      iframe.onload = function () {
        document.body.removeChild(iframe)
      }
      document.body.appendChild(iframe)
    }
     
    // Add a response interceptor
    axios.interceptors.response.use(c=> {
      // 處理excel文件
      if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
        downloadUrl(res.request.responseURL)
        
        res.data='';
        res.headers['content-type'] = 'text/json'
        return res;
      }
      ...
      return res;
    }, error => {
      // Do something with response error
      return Promise.reject(error.response.data || error.message)
    })
    export default axios

 res.data='';
    res.headers['content-type'] = 'text/json'
    return res;
  }
  ...
  return res;
}, error => {
  // Do something with response error
  return Promise.reject(error.response.data || error.message)
})
export default axios

 

以後咱們就能夠經過axios中的get請求下載文件了。

 
結束


 

另外一種方法
---------------------

 

因爲兼容性等問題，其實導出直接用連接更方便一些，兼容性也好，參數不是不少的話放在請求路徑後面也是ok的，具體以下：

    

 //導出
        exportOrderList() {
          this.formItem.token = Cookies.get('token');
          let param = "";
          for(let field in this.formItem) {
            if(this.formItem[field]) {
              param += field + "=" + this.formItem[field] + "&";
            }
          }
          param = param.substring(0, param.length-1);
          let url = "api/queryListExport?" + param;
          window.location.href = url;
        },

關鍵就是這句哦：

window.location.href = url;