js跨域下载文件

下载1 下载2

<!-- 跨域下载一 -->
<!-- 表现：在URL下载方式中，遇到mp4 / jpg / png等浏览器可以识别的文件格式时，下载提示框未弹出，直接在浏览器打开了该文件。
原因：经观察是a标签的download属性失效。查阅一些资料后发现download属性也受同源策略的影响，即非同一端口下不能直接下载第三方文件，所以这里    download失效之后做的仅仅是跳转功能，类似于某一视频下载地址直接通过浏览器get访问跳转。
解决方式：后端 oss可以批量设置HTTP头，设置HTTP请求头为Content-Disposition 为 attachment即可，访问的时候就是直接下载而不是浏览！ -->
 <script>
    function down(){
        let link = document.createElement("a"); //创建a标签
        link.style.display = "none"; //使其隐藏
        link.href = "http://i.danews.cc/storage/video/FfNNTX5ZcR.mp4"; //赋予文件下载地址
        link.setAttribute("download", "test"); //设置下载属性 以及文件名
        document.body.appendChild(link); //a标签插至页面中
        link.click(); //强制触发a标签事件
    }
</script>  

 <!-- 跨域下载二 -->
 <!-- 这里的文件，可以包括图片、视频、文档等
    参数说明：
    fileUrl：文件服务器的路径（路径后面加上’?response-content-type=application/octet-stream’，可以支持跨域下载）
    fileName：文件名
    suffix：文件后缀名，根据文件路径获取的 -->
 <!-- 火狐浏览器是重开页面播放（待解决）, 有解决方案或其他方法的，欢迎留言或私信 --> 
<script>
    function downLoad() {
        const url = 'http://i.danews.cc/storage/video/FfNNTX5ZcR.mp4' + '?response-content-type=application/octet-stream' // 支持跨域下载
        const name = this.fileName + '.' + this.suffix // 自定义文件名
        const a = document.createElement('a')
        a.href = url
        a.download = name // 下载后文件名
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click() // 点击下载
        document.body.removeChild(a) // 下载完成移除元素
     }

</script>

方法二：火狐浏览器是重开页面播放（待解决）, 有解决方案或其他方法的，欢迎留言或私信！