(vue)vue导出excel文件打不开,或者文件内容为object object

(vue)vue导出excel文件打不开,或者文件内容为object object[已解决]

bug:

在这里插入图片描述

  • 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data

在这里插入图片描述

在这里插入图片描述

  • 正确写法:
<a-button type="primary" icon="download" @click="daochu"> 导出 </a-button>

//导出
daochu() {
   const paramsStr = JSON.stringify(this.form)  //查询表单的数据
   axiosRest({
     url: `.../.../getConduitByExcel`,
     method: 'post',
     data: paramsStr,
     dataType: 'json',
     headers: { 'Content-type': 'application/json;' }, //它声明了请求体中的数据将会以json字符串的形式发送到后端
     responseType: 'blob', //判断是下载成功返回了二进制流还是失败返回了对象(比如服务端拒绝,返回对象,前端如果依然按二进制流处理会导致下载undefined文件),还可以是
   }).then((res) => {
     console.log(res)
     const xlsx = 'application/vnd.ms-excel'
     const blob = new Blob([res], { type: xlsx })//转换数据类型
     const a = document.createElement('a') // 转换完成,创建一个a标签用于下载
     a.download = '管道列表' + new Date().getTime() + '.xlsx'
     a.href = window.URL.createObjectURL(blob)
     a.click()
     a.remove() 
   })
 },

效果:

1.查询:
在这里插入图片描述
2.导出:
在这里插入图片描述

解决参考(和这位朋友的恰好相反):https://blog.csdn.net/weixin_48300785/article/details/125487232?spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8-125487232-blog-109057377.pc_relevant_multi_platform_whitelistv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-8-125487232-blog-109057377.pc_relevant_multi_platform_whitelistv2&utm_relevant_index=11

解决参考:https://blog.csdn.net/qq_45796667/article/details/125226309

  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值