前端配合后端接口返回的数据流实现导出功能

导出功能

1、书写函数并抛出

import axios from 'axios'
import { getToken } from '@/utils/auth'

const postDownload = function(url, params = {}, data = {}, isFormData = false) { // 定义postDownload方法
  return new Promise((resolve, reject) => {
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
    if (isFormData) {
      const formData = new FormData()
      for (const key in params) {
        formData.append(key, params[key])
      }

      params = formData
    }
    axios.defaults.headers['token'] = getToken()
    axios.post(process.env.VUE_APP_UPLOAD_FILE_API + url, params, {
      params: data,
      responseType: 'blob'
    })
      .then(response => {
        const headers = response.headers
        const name = headers['content-disposition'] // 这里如果没有获取到，联系后端设置一下headers
        let filename = ''
        let t = /filename="([^;]*);?"/i.exec(name)
        t === null && (t = /filename=([^;]*);?/i.exec(name))
        if (t !== null && t.length > 1) {
          filename = decodeURIComponent(t[1]) // 以上几步是为了获取传递过来的文件名，
        }
        console.log('--headers, name, t, filename--', headers, name, t, filename)
        const blob = new Blob([response.data], { // ArrayBuffer转为Blob
          type: 'application/octet-stream'
        })
        const downloadElement = document.createElement('a') // 创建a标签
        const href = window.URL.createObjectURL(blob)
        downloadElement.href = href // 设置href属性
        downloadElement.download = filename // 设置文件名
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href) // 释放创建的URL对象
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}

export {
  postDownload
}

1.1 getToken()

2、引入导出函数并使用

import { postDownload } from '@/api/dataStatistics/exportFile'

// 导出按钮
exportClick() {
  const url = 'xxxxxxx'
  postDownload(url).then(() => { // xxxxxx })
}