导出文件,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)
          }
        })

 

### 解决 Vue 导出 Excel 文件 WPS 提示无法打开的问题 当使用 Vue 实现导出 Excel 功能时,遇到 WPS 提示文件无法打开的问题,通常是因为响应数据类型的配置不正确。为了确保文件能够被正常解析并打开,在发起 HTTP 请求时需特别注意 `responseType` 的设置。 对于 GET 和 POST 请求而言,应当将 `responseType` 设置为 `'arraybuffer'` 以获取原始二进制流而非默认的 JSON 或文本格式[^1]: #### 配置 Axios 请求拦截器 ```javascript import axios from 'axios'; // 创建一个新的Axios实例用于处理文件下载 const fileDownloadInstance = axios.create(); fileDownloadInstance.interceptors.request.use((config) => { config.responseType = 'arraybuffer'; // 关键配置项 return config; }); ``` 针对不同请求方法的具体应用如下所示: - **GET 请求** 直接设定 `responseType='arraybuffer'` 即可满足需求。 - **POST 请求** 参数应包裹于对象内传递给服务器端接口,即 `{ responseType: 'arraybuffer' }` 形式发送。 此外,还需关注浏览器如何接收和保存这些二进制数据。通过创建 Blob 对象来表示不可变、原始数据的类文件对象,并利用 `<a>` 标签模拟点击事件触发文件下载行为。 #### 下载逻辑实现 ```javascript function downloadFile(response, filename) { const url = window.URL.createObjectURL(new Blob([response.data], { type: response.headers['content-type'] })); const link = document.createElement('a'); link.href = url; link.setAttribute('download', `${filename}.xlsx`); document.body.appendChild(link); link.click(); } ``` 最后值得注意的是,尽管设置了正确的 MIME 类型(如 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet),但在某些情况下仍可能遭遇兼容性问题。此时可以尝试调整 Content-Disposition 头部字段中的字符集声明部分,确保其与实际文档编码相匹配,从而减少因编码差异引发的显示异常情况[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值