欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 导出easyExcel(前端vue2/后端springboot)

导出easyExcel(前端vue2/后端springboot)

2024/11/30 14:51:08 来源:https://blog.csdn.net/weixin_44685872/article/details/140800356  浏览:    关键词:导出easyExcel(前端vue2/后端springboot)

本来我是不想写这篇博文的,随着我技术的上升,已经很少有东西恶心我了,百度什么都能出来,但是百度出来的都是不能直接用的,所以我手写出来供我下次使用

后端

maven如下

<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.8</version>
</dependency>

实体类


@Data
@TableName("sys_logininfor")
@ExcelIgnoreUnannotated
public class SysLogininfor implements Serializable {private static final long serialVersionUID = 1L;/*** ID*/@ExcelProperty(value = "序号")@TableId(value = "info_id", type= IdType.AUTO)private Long infoId;/*** 登录状态 0成功 1失败*/@ExcelProperty(value = "登录状态", converter = ExcelDictConvert.class)@ExcelDictFormat(dictType = "sys_common_status")private String status;/*** 登录IP地址*/@ExcelIgnoreprivate String ipaddr;/*** 提示消息*/@ExcelProperty(value = "提示消息")private String msg;/*** 请求参数*/@TableField(exist = false)private Map<String, Object> params = new HashMap<>();}

util 工具类

//导出接口public static <T> void export(HttpServletResponse response, Class<T> clazz, List<T> data, String fileName, String sheetName){response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");try{fileName= new String((fileName + ExcelTypeEnum.XLSX.getValue()).getBytes(), StandardCharsets.ISO_8859_1);response.setHeader("Content-Disposition", "attachment; filename="+fileName);EasyExcelFactory.write(response.getOutputStream()).head(clazz).registerWriteHandler(new ExcelWidthStyleStrategy()).excelType(ExcelTypeEnum.XLSX).sheet(sheetName).doWrite(data);}catch(IOException e){log.error("export excel error:",e);}}

controller 接口

    @PostMapping("/export")void export(JsonObject param,HttpServletResponse response){List<SysLogininfor> list = new ArrayList<>();String dateFormat = new DateTime().toString("yyyyMMddHHmmss");String fileName =dateFormat +"统计";export(response, SysLogininfor.class,list,fileName,"sheet1");}

前端:

js引入接口

export function export(data) {return request({url: "/export",method: post,data: data,responseType:'arraybuffer' ,})
}

vue调用

  this.loading=true
export({params: {}
}).then(response => {// 请求成功返回后,获取到Excel文件的二进制数据const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });// 创建下载链接const downloadUrl = URL.createObjectURL(blob);// 创建一个隐藏的a标签,设置下载链接和文件名,模拟点击下载const link = document.createElement('a');link.style.display = 'none';link.href = downloadUrl;link.download = '统计.xlsx';document.body.appendChild(link);link.click();document.body.removeChild(link);this.loading=false
}).catch(error => {// 请求失败处理console.error(error);
});

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com