Springboot vue导出功能实现代码

 更新时间:2020年04月29日 14:21:04   作者:网商红  
这篇文章主要介绍了Springboot vue导出功能实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

最近在工作遇到vue和Springboot 实现导出功能,翻看很多资料,发现一些博客写法都过时了,所以自己特此记录下,使用版本vue2,Springboot 2x以上,chrome浏览器 76.0.3809.100

vue 2写法

let blob = new Blob([res.data], { type: 'application/octer-stream' });

其中我发现很多博客用这样的写法,但是我发现打印res的时候没有发现data这个参数,总是报错后面直接用res就好了。
正确写法let blob = new Blob([res], { type: 'application/octer-stream' });

科普一下:axios中params和data两者,以为他们是相同的,实则不然。 因为params是添加到url的请求字符串中的,而data是添加到请求体(body)中的,最好使用params参数

import axios from 'axios'
axios({
	method: 'post',
	 url: '/user/excelExport',
	 responseType:‘blob',
	 params
}
).then(res => {
const link = document.createElement('a')
let blob = new Blob([res], { type: 'application/octer-stream' });
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
).catch(err => {
console.log(err)
}
);

后台代码写法 ——使用阿里巴巴的excel导出类easyexcel  https://github.com/alibaba/easyexcel

<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>{latestVersion}</version>
</dependency>
//这里可以不用关闭流,流在方法结束,会自动关闭,通过配置product,指定返回头
   @PostMapping(path = "/user/excelExport", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
   public void excelExport(WithdrawListDto withdrawListDto, HttpServletResponse response) {
       List<WithdrawListVo> list = withdrawService.list(withdrawListDto);
       ExcelWriter writer = new ExcelWriter(response.getOutputStream(), ExcelTypeEnum.XLSX, true);
       Sheet sheet1 = new Sheet(1, 0, WithdrawListVo.class);
       sheet1.setSheetName("sheet1");
       writer.write(list, sheet1);
   }

PostMapping,加上返回头了。前端传过来的context-Type 要加上multipart/form-data 类型,然后在前端传过来的url进行拼接参数,就可以进行多参数,但是不建议参数太多

例子:如/user/excelImport?account=12731564&userName=李四

@PostMapping(path = "/user/excelImport")
   public void excelImport(WithdrawListDto withdrawListDto,MultipartFile multipartFile) {
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Spring Boot整合邮箱发送邮件实例

    Spring Boot整合邮箱发送邮件实例

    大家好,本篇文章主要讲的是Spring Boot整合邮箱发送邮件实例,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-02-02
  • Java中求Logn/log2 的精度问题

    Java中求Logn/log2 的精度问题

    这篇文章主要介绍了Java中求Logn/log2 的精度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-08-08
  • Java用数组实现循环队列的示例

    Java用数组实现循环队列的示例

    下面小编就为大家带来一篇Java用数组实现循环队列的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 强烈推荐MyBatis 三种批量插入方式的比较

    强烈推荐MyBatis 三种批量插入方式的比较

    这篇文章主要介绍了强烈推荐MyBatis 三种批量插入方式的比较,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • Java如何获取JSONObject内指定字段key的value值

    Java如何获取JSONObject内指定字段key的value值

    这篇文章主要介绍了Java如何获取JSONObject内指定字段key的value值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 详解Java的初始化与清理

    详解Java的初始化与清理

    这篇文章主要介绍了Java的初始化与清理,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • Spring Boot 如何使用Liquibase 进行数据库迁移(操作方法)

    Spring Boot 如何使用Liquibase 进行数据库迁移(操作方法)

    在Spring Boot应用程序中使用Liquibase进行数据库迁移是一种强大的方式来管理数据库模式的变化,本文重点讲解如何在Spring Boot应用程序中使用Liquibase进行数据库迁移,从而更好地管理数据库模式的变化,感兴趣的朋友跟随小编一起看看吧
    2023-09-09
  • Java实现超简单抖音去水印的示例详解

    Java实现超简单抖音去水印的示例详解

    抖音去水印方法很简单,以前一直没有去研究,以为搞个去水印还要用到算法去除,直到动手的时候才发现这么简单,不用编程基础都能做。所以本文将介绍一个超简单抖音视频去水印方法,需要的可以参考一下
    2022-03-03
  • springboot项目中idea的pom.xml文件的引用标签全部爆红问题解决

    springboot项目中idea的pom.xml文件的引用标签全部爆红问题解决

    这篇文章主要介绍了springboot项目中idea的pom.xml文件的引用标签全部爆红问题解决,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧
    2023-12-12
  • Java 实战交易平台项目之宠物在线商城系统

    Java 实战交易平台项目之宠物在线商城系统

    读万卷书不如行万里路,只学书上的理论是远远不够的,只有在实战中才能获得能力的提升,本篇文章手把手带你用Java实现一个宠物在线商城系统,大家可以在过程中查缺补漏,提升水平
    2021-11-11

最新评论