526互联

a标签实现下载远程文件

发布时间 2023-03-23 11:43:13作者: 猕猴桃姑娘

通过a标签可以下载文件（图片、音频、视频等）

const link = document.createElement('a');
link.href = fileurl;
link.download = filename;
link.click();

远程文件地址，直接按照上面的写法，会跳转到下载的链接页面；想要实现直接下载而不是跳转到下载的链接地址再下载，可以将远程文件转换成blob然后再下载，具体代码如下：

　　function getBase64ByURL (fileurl) {
      return new Promise(resolve => {
        window.URL = window.URL || window.webkitURL;
        var xhr = new XMLHttpRequest();
        xhr.open('get', fileurl, true);
        xhr.responseType = 'blob';
        xhr.onload = function () {
          if (this.status == 200) {
            var blob = this.response;
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
              resolve({blob,base64:e.target.result});
            };
            oFileReader.readAsDataURL(blob);
          }
        };
        xhr.send();
      });
    };

    // 调用、下载
    getBase64ByURL(fileurl).then(res=>{
      let {blob,base64} = res;
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    });

　　

有不足之处请指出，欢迎讨论！