axios先後端分離下載文件

寫vue項目用的axios庫，在處理下載文件的時候，發現後端返回的是文件流，沒法直接下載，只能用a標籤處理，可是對於有鑑權的下載，a標籤顯然是不合適的了。因而乎就查閱各類資料各類鼓搗終於搞出來了

axios請求下載

請求下載的時候設置responseType爲blob，例如：

export function apiDownloadFiles(fielId) {
  return axios({
    url: `/document/${fielId}`,
    method: 'get',
    responseType: 'blob'
  })
}
複製代碼

這樣請求就會走axios攔截器裏配置的方法，你就能夠給下載添加請求頭token了

請求後獲取到的文件流如何下載到本地呢？

後端返回了的文件流是這樣的

這個時候要怎麼處理才能變成文件呢？

apiDownloadFiles(file.id).then(res => {
          if (res.data.type === "application/json") {
            this.$message({
              type: "error",
              message: "下載失敗，文件不存在或權限不足"
            });
          } else {
            let blob = new Blob([res.data]);
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, file.fileName);
            } else {
              let link = document.createElement("a");
              let evt = document.createEvent("HTMLEvents");
              evt.initEvent("click", false, false);
              link.href = URL.createObjectURL(blob); 
              link.download = file.fileName;
              link.style.display = "none";
              document.body.appendChild(link);
              link.click();
              window.URL.revokeObjectURL(link.href);
            }
          }
        });
複製代碼

模擬a標籤點擊，成功下載文件。 若是沒有太多參數的下載文件，能夠直接下載，這種沒有token，比較適合用cookies和後端作認證的。

const link = document.createElement('a')
const evt = document.createEvent('HTMLEvents')
evt.initEvent('click', false, false)
link.href = `${process.env.BASE_API}/template/download/${this.fileId}`
link.target = '_blank'
link.style.display = 'none'
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(link.href)
複製代碼