js 跨域下载链接下载文件实现重命名，文件名称兼容处理

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

原创最新推荐文章于 2024-08-19 11:01:38 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

js 专栏收录该内容

14 篇文章

订阅专栏

该博客探讨了如何解决下载链接的跨域问题，通过使用流格式下载文件并重新组装，确保本地下载的文件没有跨域限制。文章详细介绍了使用XMLHttpRequest进行GET请求，设置responseType为blob，然后利用创建的a标签实现文件下载，并能根据需求更改文件名。

背景：标签的 download 跨域设置名称无效

思路：下载链接按照流格式下载下来在组装，下载到本地的流就是同域了

let downChangeName = (downUrl='',downFilename)=>{
    if(!downUrl){
      window.alert('请传入下载链接')
      return
    }
    let filename = '';
    let url = downUrl ;
    let fileType = downUrl.substr(downUrl.lastIndexOf('.'))
    let downUrlName = downUrl.substr(downUrl.lastIndexOf('/')+1)
    // 文件名称处理
    if(downFilename){
      let downFilenameFileType = downFilename.substr(downFilename.lastIndexOf('.'))
      console.log(120000,downFilenameFileType)
      if(downFilenameFileType === fileType ){
        filename = downFilename
      } else{
        filename = downFilename.substr(0,downFilename.lastIndexOf('.')) + fileType
      }
    } else{
      filename = downUrlName
    }
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
      if (xhr.status === 200) {
        console.log(1114,xhr)
        // cb(xhr.response);
        var link = document.createElement('a');
        var body = document.querySelector('body');
        link.href = window.URL.createObjectURL(xhr.response);
        link.download = filename;
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    };
    xhr.send();
  }