h5下載、導出文件

後臺管理系統經常會需要導出Excel表格，h5導出、下載文件的常用方式有以下兩種：

1、a鏈接下載，該方法較爲常見。

特點：無法攜帶自定義請求頭，接口驗證用戶信息不方便

import qs from 'qs';
export default function (url, data) {
  if (data) {
    url = url + '?' + qs.stringify(data) // GET請求，序列化請求參數
  }
  let a = document.createElement("a");
  a.setAttribute("href", url);
  a.click();
}

2、通過接口請求文件二進制流，將二進制流轉爲文件。

特點：可套用正常接口請求，可攜帶請求頭

import qs from 'qs';
import axios from 'axios'
export default function (url, data, fileName) {
  if (data) {
    url = url + '?' + qs.stringify(data)
  }
  axios({
    url: url,
    method: 'GET',
    headers: {
      "Authorization": window.localStorage.getItem("token") // 在請求頭添加參數
    },
    responseType: "blob"
  }, { timeout: 5000 }).then((res) => {
    if (res.status == 200) {
      let blob = res.data;
      let filename = fileName + ".xlsx"; // 自定義文件名
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        let a = document.createElement("a");
        let url = createObjectURL(blob);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      }
    }
  }).catch((err) => {
    console.log(err);
    reject(err);
  })
}
function createObjectURL (object) {
  return window.URL
    ? window.URL.createObjectURL(object)
    : window.webkitURL.createObjectURL(object);
}