Vue中后端传递流文件，前端构建FormData，下载Excel

前端发起请求，后端返回流格式文件，前端构建FormData去接收并下载Excel。
注意：

• 发送请求时，记得设置responseType为blob。如下所示：

export function downLoad(data) {
 return request({
   url: EXPORT_PAYED_BILL,
   method: 'get',
   params: data,
   responseType: 'blob'
 })
}

• 如果项目中有统一根据某个字段是否是-1，0进行判断是否成功进行拦截，需要根据返回类型放过blob类型数据的拦截。如下所示：

service.interceptors.response.use(response => {
 endLoading()
 const res = response.data
 if (response.config.responseType === 'blob') {
   return res
 }
 if (+res.code !== 0) {
   console.log('code不等于0')
   Message({
     message: res.msg || 'Error',
     type: 'error',
     duration: 5 * 1000
   })
   return Promise.reject(new Error(res.msg || 'Error'))
 } else {
   return res
 }
}, errorFn)

最后
下载Excel，设备文件名：

// 导出Excel
    async downLoadExcel() {
      const { contractNos, timeRange = [], payRange = [] } = this.form
      const startDate = (timeRange && timeRange[0]) || ''
      const endDate = (timeRange && timeRange[1]) || ''
      const payStartDate = (payRange && payRange[0]) || ''
      const payEndDate = (payRange && payRange[1]) || ''
      const params = {
        contractNos,
        startDate,
        endDate,
        payStartDate,
        payEndDate
      }
      const res = await downLoad(params)
      // 调用成功，在html中创建一个a元素
      const aTag = document.createElement('a')
      // 创建一个blob对象
      const blob = new Blob([res], {
        // Excel文件版本
        type:
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }) // 这个content是下载的文件内容，自己修改

      const day = new Date()
      const formatDate = moment(day).format('YYYY-MM-DD')
      aTag.download = `已付账单-${formatDate}` // 下载的文件名
      aTag.href = URL.createObjectURL(blob) // 创建一个URL对象
      aTag.click()
      URL.revokeObjectURL(blob)
    },

关注前端梦想家，有更多更好的前端开发技巧，帮助你又快又好的搬砖，一起为梦想努力！