Nginx配置指定媒体类型文件强制下载

由于业务需要，在点击显示链接（如www.xxx.com/2015-01-15/xxx.png）显示媒体资源（如图片、视频、音频、文档），而在点击下载链接（如www.xxx.com/2015-01-15/xxx.png?download=true）请求静态资源时，强制下载而不是在浏览器中直接显示。可以采用nginx配置加前端js方法来实现。

1、配置NGINX配置、在nginx的站点配置server { } 里面添加如下：

location ~ .*\.(gif|jpg|jpeg|bmp|png|mp3|wma|mp4|swf|txt)$
 {
     if ( $query_string ~ "download=true$" )
     {
         add_header Content-Disposition "attachment; filename=$request_filename";
     }
 }

2、前端js 实现方法、在vue中定义方法、在下载按钮上调用即可：

// JS 方法、传入文件URL。点击事件上调用download方法即可
download (data) {
    if (!data) {
        return
    }
    let filename = data.replace(/(.+)[＼＼/]/,"");
    let url = data + "?download=true";
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', filename)

    document.body.appendChild(link)
    link.click()
}