vue element 调用后台下载文件

白龙菜牛

已于 2022-04-25 18:02:51 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue Java 文章标签： java vue.js

于 2022-04-15 18:21:45 首次发布

本文链接：https://blog.csdn.net/qq_39960204/article/details/124200844

Java 同时被 2 个专栏收录

28 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

这篇博客详细记录了如何使用VueElement组件调用后台接口实现文件下载。前端通过创建Blob对象和模拟点击下载链接的方式，后台设置相应响应头并读取文件流输出。关键步骤包括设置Content-Type，Content-Disposition以及利用HttpServletResponse进行文件流传输。

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

vue element 调用后台下载文件

调用后台下载文件，简单记录一下

前端代码

代码中的 res为后台返回的文件流

let blob = new Blob([res], { type: "application/vnd.ms-excel" });
let elink = document.createElement('a');
elink.download = '下载文件名称.xlsx'
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL对象
document.body.removeChild(elink);

后台代码

public void download(HttpServletResponse response) {
   	// 获取文件路径
   	String path = this.getClass().getClassLoader().getResource("file").getPath();
   	       
   	File file = new File(path + File.separator + "下载文件名称.xlsx");
   	response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);

   	try (FileInputStream in = new FileInputStream(file); OutputStream out = response.getOutputStream();){
   	    response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(file.getName(), "UTF-8") + "");
   	   
   	    IOUtils.copy(in, out);
   	    response.flushBuffer();
   	} catch (Exception e) {
   	    e.printStackTrace();
   	    logger.info("文件下载失败,原因{}", e);
   	}
}