前端调用后端接口 导出excel, 并解决导出失败转化blob失败类型消息

接口API:

   P -- 传参,responseType:'blob' -- 设置导出类型为 blob,  timeout: 600000 -- 单独设置导出时间
   export const putinDetailexport = P => post(V1+'/materialOrder/selected/export', P,{responseType:'blob'},{timeout: 600000})

业务代码:

// 导出新接口
      handleExportNew(){
	        this.$store.dispatch(this.ACTIONS.EXPORTNEW, { ...this.putInForm },{ responseType: "blob" }).then(result => {
		          if(result){
			            let blob = new Blob([result], { type: "application/vnd.ms-excel" });
			            const link = document.createElement("a");
			            let fileName = decodeURIComponent("入库信息.xls");    ----- **这里加后缀 .xls 是因为有些浏览器 下载后没有类型导致打不开**
			            var url = window.URL.createObjectURL(blob);
			            link.style.display = "none";
			            link.href = url;
			            link.setAttribute("download", fileName);
			            document.body.appendChild(link);
			            link.click();
			            document.body.removeChild(link);
			            //  清空勾选
			            this.$refs.multipleAssets.clearSelection();
		          }
	        })
      },

拦截器处理错误消息: – 要处理的原因是因为 导出操作失败接口将信息转成blob类型,导致不能 获取错误信息

// 添加响应拦截器
request.interceptors.response.use(function (response) {
        loading.close()
        if(!response.data.rows){
            response.data['rows'] = []
        }
        if(!response.data.data){
            response.data['data'] = {}
        }
        return response
  }, function (error) {
        loading.close()
        if(error.message.indexOf('timeout') !== -1) {
              Message.error({message: '网络延迟,请求超时,请再次尝试!'})
        } else if(error.response.status === 400){
              if(error.response.data.code == 1001){
                store.commit('count',true)  // 当1001 需要弹框提醒 资产上限
              }else {
              		--------这里开始处理 导出错误转化
                    if(error.response.config.responseType == 'blob'){   //解决 blob请求类型 错误信息
                        let blob = new Blob([error.response.data])
                        let reader = new FileReader()
                        reader.readAsText(blob,'utf-8')
                        reader.onload = function () {
                            try{
                                let data = JSON.parse(reader.result)
                                Message.error({message: data.message ||'操作有误,请重新操作!'})
                            }catch (e) {
                                Message.error({message: '系统错误请联系管理员'})
                            }
                        }
                     ---------- 结束
                    }else{
                        if(error.response.data.data){
                            return Promise.reject(error)
                        }else{
                            Message.error({message: error.response.data.message ||'操作有误,请重新操作!'})
                        }
                    }
              }
        } else if (error.response.status === 429){
              Message.error({message:'亲,当前用户有点多哦,请稍等几分钟!'})
        } else {
              Message.error({message: '系统错误请联系管理员'})
        }
        console.log(error)

  });
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 前端调用后端接口导出 Excel 文件,可以采用以下步骤: 1. 在后端编写导出 Excel接口,通常采用 Spring MVC 或者 Express 等框架,在接口中使用 Apache POI 或者其他 Excel 库生成 Excel 文件,并将生成的文件以流的形式返回给前端。 2. 在前端编写调用后端接口的代码,通常可以使用 axios 或者其他 HTTP 请求库来发送请求,并将返回的文件流保存到本地,同时进行下载操作。 以下是一个简单的 Vue 组件示例代码: ```html <template> <div> <button @click="exportExcel">导出 Excel</button> </div> </template> <script> import axios from 'axios' export default { methods: { exportExcel() { axios({ url: '/api/export', method: 'GET', responseType: 'blob', }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'export.xlsx') document.body.appendChild(link) link.click() }) }, }, } </script> ``` 以上代码中,我们定义了一个 `exportExcel` 方法,当用户点击按钮时会触发该方法。在方法中,我们使用 axios 发送 GET 请求,并将响应类型设置为 blob,这样可以保留文件流的形式。在获取到响应后,我们将其转换为 URL 对象,创建一个下载链接,并触发点击操作,从而实现文件的下载。我们可以将请求的 URL 设置为后端提供的接口,例如 `'/api/export'`,从而实现与后端的交互。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值