SpringBoot+VUE实现文件下载功能

记录一下在项目组开发的一个小功能(作为一个开发小白,在项目组前后台都要写,真的是太难了@(--------)@ ,进入正题,写的不好还望指教,参考网上的一些内容)
效果:
前提:项目需要下载的文件存放在服务器上,有地址。
在这里插入图片描述
在这里插入图片描述

需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试)

后端接口:

我是直接在controller层写的。
在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件。

@RequestMapping(value = "/netDownLoadNet",method = RequestMethod.GET,produces = {"application/json;charset=UTF-8"})
    public void netDownLoadNet(String netAddress,HttpServletResponse response,HttpServletRequest request) throws Exception {
        URL url = new URL(netAddress);
        URLConnection conn = url.openConnection();
        InputStream inputStream = conn.getInputStream();
        response.reset();
        response.setContentType(conn.getContentType());
        response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有
        // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1, http://locahost"); // 允许白名单IP
        // 响应类型
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        // 预检请求的结果缓存60分钟
        response.setHeader("Access-Control-Max-Age", "3600");
        // 响应头设置
        //response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(netAddress, "UTF-8"));
        response.addHeader("Content-Length",""+conn.getContentLength());
        response.setContentType("application/octet-stream");
        response.setContentType("application/json;charset=utf-8");
        System.out.println("size:"+conn.getContentLength());
        byte[] buffer = new byte[409600];
        int len;
        OutputStream outputStream = response.getOutputStream();
        while ((len = inputStream.read(buffer)) > 0) {
            outputStream.write(buffer, 0, len);
        }
        inputStream.close();
    }
}

前端页面调用:

使用了a标签,简单方便,达到了需求。使用了:href属性 在函数里给其赋值。

<template>
	<div>
	 <a :href="filePath" v-if="hasAuthority" download="" type="button"
                                           style="text-decoration:none;font-size:20px;color: #409EFF;margin-left: 10px" @click="downloadFile(scope.row)"  >
                                            保存本地</a>
	</div>
</template>
<script>
export default {
	data() {
            return {
            filePath:''
            }
    },
 	methods: {
 //文件保存到本地
            downloadFile(row){
                let url = `${this.$http.defaults.baseURL}//fileManagement/netDownLoadNet?netAddress=${row.fileUrl}`;
                this.filePath = url;
            },
 }
 }
</script>

就这样实现的。

已标记关键词 清除标记
<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页