springboot+vue+easyExcel 导出excel

最新推荐文章于 2024-01-04 17:06:44 发布

t518vs20s

最新推荐文章于 2024-01-04 17:06:44 发布

阅读量1k

点赞数

文章标签： spring boot vue.js java

本文链接：https://blog.youkuaiyun.com/t518vs20s/article/details/121295927

版权

本文探讨了如何在Spring Boot项目中利用EasyExcel库，通过POST和GET请求方式实现后台导出Excel文件，并详细介绍了两者在前端Vue中的调用方式和导出结果。着重展示了版本管理与依赖配置，以及前后端配合的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyexcel版本

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.10</version>
            <exclusions>
                <exclusion>
                    <groupId>org.apache.poi</groupId>
                    <artifactId>poi-ooxml</artifactId>
                </exclusion>
                <exclusion>
                    <artifactId>poi</artifactId>
                    <groupId>org.apache.poi</groupId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.17</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml-schemas</artifactId>
            <version>3.17</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.17</version>
        </dependency>

POST方式

后台：

@RequestMapping("/excel")
public class TestController {
	@PostMapping(value = "/export")
    public void export(HttpServletResponse response) throws Exception {
	
        List<User> userList = getUserList();
		
		response.setContentType("application/vnd.ms-excel;charset=utf-8");
        response.setHeader("Content-disposition", "attachment;filename=" + System.currentTimeMillis() + ".xlsx");
        response.setCharacterEncoding("utf-8");

        try{
            EasyExcel.write(response.getOutputStream(), BaseProductClassDto.class)
                    .sheet("sheet1")
                    .doWrite(baseProductClassList);
        }catch (Exception e) {
            e.printStackTrace();
        }
		
    }
	
	private List<User> getUserList(){
		List<User> userList = new ArrayList<>();
		User user = new User();
		user.setUserName("张三");
		user.setSex("男");
		user.setAge("10");
		userList.add(user);
		return userList;
	}
    
}

前端vue：

<sd-button-group>
      <a-button
        type="primary"
        v-action:export
        @click="exportData"
      >数据导出</a-button>
    </sd-button-group>

exportData() {
        // const headers = { 'Content-Type': 'application/octet-stream' }
        axios.post('/excel/export',{},
          { responseType: 'blob' }).then((res) => {
          const link = document.createElement('a')
          const blob = new Blob([res], { type: 'application/vnd.ms-excel'})
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = '用户列表.xlsx'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
     }

导出结果：

GET方式

后台：

@RequestMapping("/excel")
public class TestController {
	@GetMapping(value = "/export")
    public void export(HttpServletResponse response) throws Exception {
	
        List<User> userList = getUserList();
		
		response.setContentType("application/vnd.ms-excel;charset=utf-8");
        response.setHeader("Content-disposition", "attachment;filename=" + System.currentTimeMillis() + ".xlsx");
        response.setCharacterEncoding("utf-8");

        try{
            EasyExcel.write(response.getOutputStream(), BaseProductClassDto.class)
                    .sheet("sheet1")
                    .doWrite(baseProductClassList);
        }catch (Exception e) {
            e.printStackTrace();
        }
		
    }
	
	private List<User> getUserList(){
		List<User> userList = new ArrayList<>();
		User user = new User();
		user.setUserName("张三");
		user.setSex("男");
		user.setAge("10");
		userList.add(user);
		return userList;
	}
    
}

前端vue：

axios({url: '/excel/export',method: 'get',responseType: 'blob'})
     .then((res) => {
          const link = document.createElement('a')
          const blob = new Blob([res], { type: 'application/vnd.ms-excel'})
          link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.download = '用户列表.xlsx'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })

导出结果：

参考资料：

vue+axios 与spring boot EasyExcel实现后台导出excel并下载_feng2036的博客-优快云博客

springboot+vue+easyexcel导出_Desire-C的博客-优快云博客