导出文件,responseType设置为'arraybuffer',如果导出出错,后台返回错误信息应该怎么办?

1、正常导出的情况:(使用axios发送请求)后端返回二进制文件流

api:

//导出api

export function download(className,data){

return request({

url:'/api/'+className+'/export',

methods:'get',

params:data,

responseType:'arraybuffer',

})

}

// 调用api

this.$api.download(className,{name:nameCN,...this.searchForm}).then(res=>{

const data = new Blob([res],{type:'application/vnd.ms-excel'})

const url = URL.createObjectURL(data)

const a = document.createElement('a')

a.href = url

a.download = 'table.xls'

a.click()

URL.revokeObjectURL(url)

})

2、后来数据量过多导出出错,和后端约定,如果数据量过多则后端返回错误信息:

{
message: "数据量太大,建议导出数据不要超过6万以上"
retcode: "111111"
style: "PLAIN"
timestamp: 1570605714954
uri: "/api/zyBrfymxk/export"
}

由于请求的时候设置了responseType:'arraybuffer',返回的是数据流,要取得json信息需要进行转换:

let enc = new TextDecoder('utf-8')
let data = JSON.parse(enc.decode(new Uint8Array(res.data)))

// 调用api 改成:

this.$api.downloadXlsx(className,{name:nameCN,...this.searchForm}).then(res=>{
          try {
                let enc = new TextDecoder('utf-8')
                let data = JSON.parse(enc.decode(new Uint8Array(res.data)))
                this.$message({
                  message: data.message,
                  type: 'warning'
                });
                this.downloading = false
          } catch (error) {
                this.downloading = false
                const data = new Blob([res.data],{type:'application/vnd.ms-excel'})
                const url = URL.createObjectURL(data)
                const a = document.createElement('a')
                a.href = url
                a.download = nameCN+'.xlsx';
                a.click()
                URL.revokeObjectURL(url)
          }
        })

 

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Vue.js 中进行导出时,可以使用 Axios 库进行请求和响应。要设置导出的 Content-Type,可以在 Axios 请求中设置responseType”选项。 例如,如果您要将导出设置为 JSON 格式,则可以在 Axios 请求中添加以下代码: ```javascript axios.get('/api/export', { responseType: 'json' // 设置响应类型为 JSON }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) ``` 同样,如果您要将导出设置为二进制文件格式(如 Excel、PDF 等),则可以将“responseType”选项设置为“arraybuffer”: ```javascript axios.get('/api/export', { responseType: 'arraybuffer' // 设置响应类型为二进制文件 }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) ``` 在服务器端,您需要根据请求头中的“Accept”参数来确定用户需要的导出格式,并相应地设置响应头的“Content-Type”参数。例如,在 Express 框架中,您可以使用以下代码设置响应头: ```javascript app.get('/api/export', (req, res) => { const { accept } = req.headers; if (accept === 'application/json') { res.setHeader('Content-Type', 'application/json'); // 导出 JSON 格式文件 } else if (accept === 'application/pdf') { res.setHeader('Content-Type', 'application/pdf'); // 导出 PDF 格式文件 } else if (accept === 'application/vnd.ms-excel') { res.setHeader('Content-Type', 'application/vnd.ms-excel'); // 导出 Excel 格式文件 } else { // 不支持的导出格式 res.status(400).send('Unsupported export format'); } }); ``` 以上为示例代码,您需要根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值