easyexcel与vue配合下载excel

后端

设置响应

java 复制代码
// 设置响应头
response.setContentType("application/octet-stream;charset=UTF-8");
String returnName = null;
try {
    returnName = URLEncoder.encode(fileName, "UTF-8");
} catch (UnsupportedEncodingException e) {
    throw new RuntimeException(e);
}
response.setHeader("Content-Disposition", "attachment;filename=" + returnName);

往response 写入数据

  • 使用easyexcel自带的方法就行
java 复制代码
// 这里 指定文件
try (ExcelWriter excelWriter = EasyExcel.write(response.getOutputStream()).build();) {
// try (ExcelWriter excelWriter = EasyExcel.write(fileName).build()) {
    if (hasXL) {
        WriteSheet writeSheet2 = EasyExcel.writerSheet(2, "小料费用差异对比").head(DepreciationEquipXLDto.class).build();
        // 获取小料费用差异
        List<DepreciationEquipXLDto> data2 = assetDepreciationSingleDetailService.getDepreciationEquXLCompare(entityList);
        excelWriter.write(data2, writeSheet2);
    }

    if (hasJL) {
        WriteSheet writeSheet = EasyExcel.writerSheet(0, "其他费用差异对比").head(DepreciationOtherDto.class).build();
        // 获取其他费用差异
        List<DepreciationOtherDto> data = assetDepreciationSingleDetailService.getDepreciationOtherCompare(entityList);
        excelWriter.write(data, writeSheet);

        WriteSheet writeSheet1 = EasyExcel.writerSheet(1, "胶料费用差异对比").head(DepreciationEquipJLDto.class).build();
        // 获取胶料费用差异
        List<DepreciationEquipJLDto> data1 = assetDepreciationSingleDetailService.getDepreciationEquJLCompare(entityList);
        excelWriter.write(data1, writeSheet1);
    }

    WriteSheet writeSheet3 = EasyExcel.writerSheet(3, "总费用差异对比").head(DepreciationTotalDto.class).build();
    // 获取总费用差异
    List<DepreciationTotalDto> data3 = assetDepreciationSingleDetailService.getDepreciationTotalCompare(entityList);
    excelWriter.write(data3, writeSheet3);

    //     获取具体的折旧明细
    WriteSheet writeSheet4 = EasyExcel.writerSheet(4, "折旧明细").head(DepreciationSingleDetailDto.class).build();
    // 获取具体的折旧明细
    List<DepreciationSingleDetailDto> data4 = assetDepreciationSingleDetailService.getDepreciationSingleDetail(entityList);
    excelWriter.write(data4, writeSheet4);

} catch (IOException e) {
    throw new RuntimeException(e);
}

前端

  • 后端返回了之后,有响应数据,但是不会自动下载
  • 前端定义的返回类型必须是blob类型
  • 创建隐式a标签,自动点击下载
js 复制代码
export function downloadCompareFile(data) {
  return request({
    url: '/client/depreciationDetail/downloadCompareFile',
    method: 'post',
    data: data,
    responseType: 'blob' // 表明返回服务器返回
  })
}
js 复制代码
downloadCompareFile(){
  downloadCompareFile(this.compareDataListParams)
    .then((res) => { // 处理返回的文件流
        const content = res
        const blob = new Blob([content])
        console.log(content)
        const fileName = 'xxx.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        }
      }
      )
},

参考

https://blog.csdn.net/weixin_43597991/article/details/127861599

相关推荐
lingggggaaaa8 分钟前
小迪安全v2023学习笔记(一百三十四讲)—— Windows权限提升篇&数据库篇&MySQL&MSSQL&Oracle&自动化项目
java·数据库·windows·笔记·学习·安全·网络安全
小光学长10 分钟前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
huangql52029 分钟前
截图功能技术详解:从原理到实现的完整指南
前端·html5
迦蓝叶38 分钟前
JAiRouter v1.0.0 正式发布:企业级 AI 服务网关的开源解决方案
java·运维·人工智能·网关·spring·ai·开源
安卓开发者43 分钟前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
长空任鸟飞_阿康1 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
yudiandian20141 小时前
03 Eclipse 配置 JDK 环境
java·ide·eclipse
_码力全开_1 小时前
P1005 [NOIP 2007 提高组] 矩阵取数游戏
java·c语言·c++·python·算法·矩阵·go
陈一Tender1 小时前
JavaWeb后端实战(登录认证 & 令牌技术 & 拦截器 & 过滤器)
java·开发语言·spring boot·mysql