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

最新推荐文章于 2024-08-19 11:01:38 发布

句点_a

最新推荐文章于 2024-08-19 11:01:38 发布

阅读量2.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41851047/article/details/121764638

版权

当在a标签中使用download属性进行文件下载时，如果遇到跨域问题，download属性将失效。解决方法是通过JavaScript的XMLHttpRequest对象，设置响应类型为blob，然后创建一个新的URL，利用a标签的click事件触发下载。该方法详细步骤包括发送GET请求，处理响应，创建并点击隐藏的a标签来实现文件下载。

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

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

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

downloadFile(url, fileName) {
    var x = new XMLHttpRequest();
    x.open("GET", url, true);
    x.responseType = 'blob';
    x.onload=function(e) {
        //会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
    }
    x.send();
},