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

最新推荐文章于 2024-03-12 16:47:42 发布

a865567121

最新推荐文章于 2024-03-12 16:47:42 发布

阅读量2.8k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/a865567121/article/details/125375291

版权

本文详细介绍了在前端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('导出失败')
});