解决跨域访问资源，a标签download属性失效的问题

最新推荐文章于 2024-10-10 16:56:39 发布

MegaGengar

最新推荐文章于 2024-10-10 16:56:39 发布

阅读量4.1k

点赞数 4

文章标签： javascript

原文链接：https://blog.csdn.net/qq_29483485/article/details/103027687

版权

当使用HTML的a标签download属性进行文件下载时，如果遇到跨域问题，该属性将失效。解决方法是通过创建XMLHttpRequest获取文件Blob，然后利用window.URL.createObjectURL创建临时下载链接，并在新创建的a标签中触发点击，从而实现跨域文件的下载。此方法适用于前端开发中处理文件下载的场景。

摘要由CSDN通过智能技术生成

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

<a click="downloadFile(fileUrl,fileName)">下载文件</a>

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();
}

参考地址：https://blog.csdn.net/qq_29483485/article/details/103027687