前端vue通用文件导出(axios)

import axios from 'axios'
import qs from 'qs'
function download(url, params, method = 'GET') {
  return new Promise((resolve, reject) => {
    downloadRequest(url, params, method).then(response => {
      if (response.data.type === 'application/octet-stream') {
        const fileName = response.headers['content-disposition'].split('=')[1]
        /* 兼容ie内核,360浏览器的兼容模式 */
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          const blob = new Blob([response.data], { type: 'application/zip' })
          window.navigator.msSaveOrOpenBlob(blob, fileName)
        } else {
          /* 火狐谷歌的文件下载方式 */
          const blob = new Blob([response.data], { type: 'application/zip' })
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a') // 创建a标签
          link.href = url
          link.download = decodeURI(fileName)
          link.click()
          URL.revokeObjectURL(url) // 释放内存
        }
        resolve(response)
      } else {
        const reader = new FileReader()
        reader.onload = function(event) {
          const msg = JSON.parse(reader.result).data
          this.$message.error(msg) // 显示错误信息
        }
        reader.readAsText(response.data)
        resolve(response)
      }
    }).catch(error => {
      this.$message.error('' + error)
      reject(error)
    })
  })
}
function downloadRequest(url, params, method) {
  return new Promise((resolve, reject) => {
    if (method === 'GET') {
      axios({
        method,
        url,
        params,
        paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'brackets' }) },
        responseType: 'blob'
      }).then(response => { resolve(response) }).catch(error => { reject(error) })
    } else {
      axios({
        method,
        url,
        data: params,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // 将传给后台的数据转换成FormData
        transformRequest: [function(data) { // 格式转换
          data = qs.stringify(data)
          return data
        }],
        responseType: 'blob'
      }).then(response => { resolve(response) }).catch(error => { reject(error) })
    }
  })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值