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);
}