解决js通过url下载文件，重命名

一只金牛座的崽

已于 2024-03-26 17:39:32 修改

阅读量751

点赞数 1

分类专栏： Js 文章标签： javascript 前端 java

于 2024-03-26 16:38:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43456275/article/details/137050627

版权

Js 专栏收录该内容

25 篇文章

订阅专栏

文章讲述了在文件服务器地址不同导致的跨域问题下，如何使用JavaScript的`download`属性下载文件，通过`getBlob`函数获取Blob对象并创建临时下载链接来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

download属性的兼容性
由于文件服务器的地址不同，导致跨域的问题，使得a标签的download="filename"不生效

解决方案：

downloadErrorFile () {
   this.getBlob('文件的url').then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.setAttribute('href', url);
        a.setAttribute('target', '_blank');
        a.setAttribute('download', '错误数据');
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    });
},

getBlob (url) {
   return new Promise(resolve => {
       const xhr = new XMLHttpRequest();
       xhr.open('GET', url, true);
       xhr.responseType = 'blob';
       xhr.onload = () => {
           if (xhr.status === 200) {
               resolve(xhr.response);
           }
       };
       xhr.send();
   });
},