vue 下载文件前后端代码亲测有效

最近做项目的时候遇到了使用vue下载文件模板的需求，当我用传统的html思想去实现功能时，我发现事情不是我想的那么简单。话不多说，直接上代码

首先是后端代码，不需要返回结果，但是需要使用流操作把文件信息写入HTTP的响应信息中，返回给浏览器

// An highlighted block/*** 下载文件岗位模板* @return 文件流*/@GetMapping("orgExcel")public void getExcelOrg( HttpServletResponse  response){String realPath = "gzdx.service/task/missionOrg.xls";//获取要下载的文件的相对路径String fileName = realPath.substring(realPath.lastIndexOf("\\")+1);//获取要下载的文件名//设置content-disposition响应头控制浏览器以下载的形式打开文件，中文文件名要使用URLEncoder.encode方法进行编码，否则会出现文件名乱码try {response.setHeader("content-disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8"));InputStream in = new FileInputStream(realPath);//获取文件输入流int len = 0;byte[] buffer = new byte[1024];OutputStream out = response.getOutputStream();while ((len = in.read(buffer)) > 0) {out.write(buffer,0,len);//将缓冲区的数据输出到客户端浏览器}in.close();} catch (Exception e) {e.printStackTrace();}}

这里有一个雷大家要避免一下，
String realPath = “gzdx.service/task/missionOrg.xls”; 这里我最开始使用的文件绝对路径测试，没问题，但是我把文件放在resources路径下，使用相对路径访问时候，系统一直提示找不到路径文件。反复试验无效，我直接把文件路径放到模块根目录下，在使用相对路径访问，成功。我猜测可能是微服务项目，模块过多时，使用src/resources访问相对路径可能导致系统找不到。稳妥起见，建议直接放在模块根目录下面。

前台vue代码
下载链接

// An highlighted block
<el-link type="info" style="font-size:12px" @click="importTemplate('person')">下载个人模板</el-link><br>

JS文件

// An highlighted block
// 下载模板个人
export function personExcel() {return request({url: '/task/personExcel/',method: 'get',responseType: 'blob'//不管你怎么封装的axius，都要把请求类型设置为bolb})
}

方法代码

// An highlighted block
//下载模板导入importTemplate(){personExcel().then((res) => {var name = "工单导入个人模板.xls";var blob = new Blob([res]);var url = window.URL.createObjectURL(blob);var aLink = document.createElement("a");aLink.style.display = "none";aLink.href = url;aLink.setAttribute("download", name);document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink); //下载完成移除元素window.URL.revokeObjectURL(url); //释放掉blob对象});},

这里也有一个雷要避一下-- var blob = new Blob([res]);
这个res其实就是写在相应信息里面的流信息了，你要看你的项目代码是把留信息封装过没，如果没有，后台返回是void，前台直接像我这样写就可以了。希望能帮到有缘人

vue 下载文件前后端代码亲测有效相关推荐

使用EasyExcel导入、根据模板下载(附前后端代码)
使用以上导包如果报错 NoClassDefFoundError,可能需要引入cglib包 1.excel的导入前端代码: : 由于前端type="file"的样式固定,可以隐藏i ...
python django框架怎么爬虫步骤_python爬虫与Django框架vue交互的前后端代码详情（励志人生网实例）...
Django(建表,配置一些的就不说了): class Jiayou(models.Model): # 建表以及字段名 zxn_title = models.CharField(max_length= ...
vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码
这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下使用Vue时,我们前端如何处理后端返回的文件流首先后端返 ...
【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】
前言: 这个Tinymce富文本编辑器是vue-element-admin内集成好的,使用过后体验非常不错,很简单易用.这里分享一下,同时又看到了网上帖子都没什么人写前后端同时展示的,很多人想知道编辑 ...
Vue使用ElementUI的确认框进行删除操作(包含前后端代码)
前言今天做自己项目的时候,有一个删除的业务,正好遇到了确认框,在此纪念一下. 这里我是使用的ElementUI的确认框! 首先ElementUI的确认框是这么说明的: 从场景上说,MessageBo ...
elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口（前后端代码版）...
记录时间 2020年10月27日 22点38分前言在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
leadshop商城系统源码-前后端代码开源-v1.0.0
介绍: eadshop是一款提供持续更新迭代服务的免费商城系统,旨在打造极致的用户体验! Leadshop由浙江禾成云计算有限公司研发,主要面向中小型企业,助力搭建电商平台,并提供专业的技术支持.免费 ...
GitHub 近两万 Star，无需编码，可一键生成前后端代码，这个开源项目有点强！...
github地址:https://github.com/zhangdaiscott/jeecg-boot 项目介绍: JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 Spri ...
基于数据库的代码自动生成工具，生成JavaBean、生成数据库文档、生成前后端代码等(v6.9.0版)
TableGo_20200520 v6.9.0 正式版发布,此次版本更新如下: 1.新增对JDK9及以上版本Java环境的支持 2.生成JavaBean更名为生 ...
基于数据库的代码自动生成工具，生成JavaBean、生成数据库文档、生成前后端代码等(TableGo v7.4.0版)
TableGo_20210921 v7.4.0 正式版发布,此次版本累计更新如下: 1.新增企业或个人的简单定制版本,为企业和个人提供软实力的增值 2.新增导入 ...

vue 下载文件前后端代码亲测有效

vue 下载文件前后端代码亲测有效相关推荐

最新文章

热门文章

vue 下载文件 前后端代码亲测有效

vue 下载文件 前后端代码亲测有效相关推荐

最新文章

热门文章

vue 下载文件前后端代码亲测有效

vue 下载文件前后端代码亲测有效相关推荐