点击实现文件的下载

点击实现文件的下载

前臺代碼

image

前端頁面資源展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<div class="pictures" v-if="toutiao.type == 1">
<img :src="picIp + toutiao.pictures">
</div>

<div class="video" v-if="toutiao.type == 3">
<video :src="picIp + toutiao.video" controls autoplay/>
</div>
<div @click="download">
<van-icon name="down"/>
下载
</div>
</div>

邏輯實現
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
const download = () => {
let filename = "";
if (toutiao.value.type == 1){
filename = toutiao.value.pictures;
}else {
filename = toutiao.value.video;
}
downloadFile(filename).then((res)=>{
//创建一个URL
let url = window.URL.createObjectURL(new Blob([res]))
// 创建一个a标签
let link = document.createElement("a")
// a标签不需要在页面显示
link.style.display = "none";
// a标签他的href设置为url
link.href = url;
link.setAttribute("download",filename)
// 将a标签放入页面
document.body.appendChild(link)
//模拟点击a标签的行为
link.click();
//将url和link所占用的资源释放
window.URL.revokeObjectURL(url)
document.body.removeChild(link)
Toast("下载成功!")
});
}
</script>
https.js設置請求類型
1
2
3
4
5
6
7
8
9
10
11
12
const http = {    
getF(url, params) {
const config = {
method: 'get',
url: url,
responseType: 'blob'
} /*这里如果GET请求有参数,则携带上传入的参数,在
URL中以?的方式放在请求链接中*/
if (params) config.params = params
return request(config)
}
}
api.js請求設置
1
2
3
4
//下载媒体资源
export function downloadFile(filename){
return http.getF("article/download?filename="+filename)
}

后台

Controller接受请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//从配置文件从读取存储地址
@Value("${upload.path}")
private String uploadPath;
@GetMapping("/download")
byte[] download(String filename){
File file = new File(this.uploadPath + filename);
HttpHeaders headers = new HttpHeaders();

// 设置响应为字节流
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
try {
return FileUtils.readFileToByteArray(file);
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
流处理依赖
1
2
3
4
5
6
<!--流工具包,将file文件返回为流-->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>

点击实现文件的下载
https://yunfreehh.github.io/2023/03/18/点击实现文件的下载/
作者
yunfree
发布于
2023年3月18日
许可协议