Solo  当前访客:0 开始使用

小水的博客

一个无聊的精彩人生

使nginx支持a标签下载文件

2019-07-11 10:56:59 loogn
0  评论    216  浏览

最近做一个有视频课程的项目,前端有个问题一直解决不了,跑过来问我,原来是这样的,课程中上传的视频可以预览、可以下载,预览倒是没问题,前端上传成功之后上传服务器会返回url地址,直接使用 video 播放就行了,但是下载不知道怎么搞了,在新页面打开的话也是直接播放了,这是因为视频是 mp4 格式,很多浏览器直接支持播放,下载的目的是让用户保存到本地,虽然可以再这个新页面右键保存视频,但是对于一般用户来说还是不够直观。
在网上查找了一下,html5 中 a 标签有个 download 属性,用来规定被下载的文件名称,比如下面的连接来下载图片:
<a href="/images/abc.jpg" download="abc”>

但是兼容性不是太好
屏幕快照20190711上午10.44.14.png
只有 Firfox 和 Chrome 支持 download 属性,所有不太可行。

前端解决不了只能后端解决了,响应头 Content-Disposition 加上 attachment 的时候,浏览器会激活下载操作,所以我们再返回文件的时候加上这个头应该就可以了,由于使用的是 nginx ,所以直接修改响应的配置文件即可:

location ~ \.mp4{
        # 如果请求地址中有请求参数?download=1,那么就视为下载操作
	if ( $query_string ~* "download=1" ) {
		add_header Content-Disposition attachment;
	}
	mp4;
}

重启 nginx:
sudo nginx -s reload
前端就可以使用a连接来下载文件了
<a href="/images/abc.jpg?download=1” download="abc”>


标题:使nginx支持a标签下载文件
作者:loogn
地址:http://www.loogn.net/articles/2019/07/11/1562813819655.html

发表评论

TOP