导出在业务中大部分是通过调用后端接口进行一个点击a标签下载文件的操作

GET请求

 * 下载文件（导出功能）
 * @param url
 * @param params
 */
export const downloadFile = (url, params = {}) => {
  if (!url) {
    return
  }
  let downloadUrl = '请求地址' + '接口地址'
  let queryStr = ''
  Object.keys(params).forEach(key => { // 对参数进行操作
    if (Array.isArray(params[key])) {
      const arrStr = params[key].join(',')
      queryStr += `&${key}=${arrStr}`
    } else {
      queryStr += `&${key}=${params[key]}`
    }
  })
  if (downloadUrl.indexOf('?') < 0) { // 拼接参数
    downloadUrl += queryStr.replace('&', '?')
  } else {
    downloadUrl += queryStr
  }
  const token = store.getters[接口] // token可以存vuex
  downloadUrl += `&Authorization=${token}` // 看接口需要的参数
  const a = document.createElement('a') 
  a.href = downloadUrl
  a.download = ''
  a.click()
}

POST请求

为什么会有post请求呢，最近有个关于部门筛选后导出的需求，考虑到可以从全国到网格社区，数组就有可能超出长度限制的可能，于是后端大佬果断让我改成post，好嘛，于是我又改成一个blob流的方式，不说了上代码。

downloadFile(params) {
      const token = this.$store.getters['globe/user/token']
      const x = new XMLHttpRequest()
      const baseUrl = '请求地址'
      x.open('POST', baseUrl, true)
      x.setRequestHeader('auth', token)
      x.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
      x.send(JSON.stringify(params))
      x.responseType = 'blob'
      x.onload = function () {
        const url = window.URL.createObjectURL(x.response)
        const a = document.createElement('a')
        a.href = url
        a.download = `xxx.xlsx` // 自定义
        a.click()
      }
    }

总结

• 首先，我不是在水文章！
• 其次，我没有在水文章！
• 最后，有需求才有文章输出你懂我意思吧