首页 > php > a标签跨域下载文件,解决download失效问题
2021
07-02

a标签跨域下载文件,解决download失效问题

背景


a标签中download属性可以更改下载文件的文件名。但是如果是跨域的话,download属性就会失效。


解决方案一

<a onclick="downloadFile('https://img1-cdn-picsh.stock-ring.com/download/pdf/2021-6-23/pdf_16244197738344649.pdf','fileName.pdf');">下载文件</a>

<a onclick="downloadFile('https://img1-cdn-picsh.stock-ring.com/download/mp3/2021-6-23/mp3_16244197781388916.mp3','fileName.mp3');">下载文件</a>

<script>
    function downloadFile(url, fileName) {
        var x = new XMLHttpRequest();
        x.open("GET", url, true);
        x.responseType = 'blob';
        x.onload = function (e) {
            var url = window.URL.createObjectURL(x.response)
            var a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            a.click();
        }
        x.send();
    }
</script>


解决方案二

当然我们也可以通过设置响应的header

Content-Disposition 

用来激活浏览器的下载,同时可以设置默认的下载的文件名。
服务端向客户端浏览器发送文件时,如果是浏览器支持的文件类型,如 TXT、JPG 等类型,会默认直接使用浏览器打开,如果需要提示用户保存,则可以通过配置 Content-Disposition 字段覆盖浏览器默认行为。常用的配置如下:
Content-Disposition:attachment;filename=FileName.txt


如果发现地址打开,无法下载或者自动保存的地址不是自己想要的默认名字时,可以考虑修改返回的header,腾讯云COS,CDN等都可以设置返回的header


参考文献:

https://cloud.tencent.com/document/product/228/41737



本文》有 0 条评论

留下一个回复