记录:导出功能:接收文件流数据进行导出(vue3)

请求接口:一定要加responseType: 'blob'

后端返回数据:

api.js
export function export() {
  return request({
    url: 'dev/api/export',
    method: 'get',
    responseType: 'blob',//一定要加
  })
}
vue:
import {export} from '@/api'

// 导出
const exportTable = () => {
  ElMessageBox.confirm('确定导出表格数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(() => {
      exportGradeScene().then((res) => {
        exportFile(res)
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '导出取消',
      })
    })
}
const exportFile = (response) => {
  // 导出文件通用逻辑(仅限axios)
  const contentDisposition = response.headers['content-disposition'] // 解析文件名
  const filename = decodeURIComponent(
    contentDisposition.split('filename=')[1].trim().replace(/\"/g, ''),
  )
  // 创建链接并触发下载
  const url = window.URL.createObjectURL(
    new Blob([response.data], {
      type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }),
  )
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', filename)
  document.body.appendChild(link)
  link.click()
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值