vue 处理后端返回的文件流,下载成excl文件,内容显示object,object

本文详细介绍了在前端Vue应用中如何与后端EasyExcel配合导出Excel文件时遇到的乱码问题,以及提供了一个具体的解决方案。问题源于前端在请求响应时未正确设置数据类型和编码。解决方案是通过axios设置responseType为'arraybuffer',并利用Blob对象创建下载链接,从而实现文件的正确下载,避免了中文乱码。
摘要由CSDN通过智能技术生成

问题描述

提示:这里描述项目中遇到的问题:

前端使用vue 后端使用easyexcel 导出excl文件,出现下图内容
在这里插入图片描述

后端代码

		 @Override
    public void selectListExport(HttpServletResponse response, ProductOrderPage page) throws IOException {
        PageHelper.startPage(page.getPage(), 10000000, true);
        List<ProductOrderExcelVo> dataList = new ArrayList<>();
        List<ProductOrderVo> daRlt = mapper.selectListPage(page);

        daRlt.forEach(it ->{
            ProductOrderExcelVo p = new ProductOrderExcelVo();
            BeanUtils.copyProperties(it, p);
            dataList.add(p);
        } );
        WriteCellStyle headWriteCellStyle = new WriteCellStyle();
        WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
        HorizontalCellStyleStrategy horizontalCellStyleStrategy = new HorizontalCellStyleStrategy(headWriteCellStyle, contentWriteCellStyle);
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("utf-8");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode("测试", "UTF-8").replaceAll("\\+", "%20");
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
        EasyExcel.write(response.getOutputStream(), ProductOrderExcelVo.class).sheet("模板").doWrite(dataList);



    }

原因分析:

提示:这里填写问题的分析:
返回数据res 是一个object对象 需要使用 res.data 拿到 数据流


在这里插入图片描述

解决方案:

提示:这里填写该问题的具体解决方案:

axios({
     method: 'post',
     url:PramsUrl,
     data:preOrderNoIds,
     responseType:"arraybuffer"
}).then((res)=>{
      let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }));
      let a= document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.setAttribute('download', `${this.downloadName}.xlsx`);
       document.body.appendChild(a);
       a.click();
       url = window.URL.revokeObjectURL(url);
       document.body.removeChild(a)
}).catch(error => {
        this.$message.error('导出失败')
});


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值