js实现文件下载并重命名

这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

通过修改a标签中download属性

  let downloadLink = document.createElement('a');
  downloadLink.download = '重命名.后缀名';
  downloadLink.href = new URL('下载路径，链接');
  downloadLink.click();

这种同源访问是没有问题的，但一跨域就不行了，试了其它方法，不是报跨域错误，就是在当前页面打开文件，体验相当不好。

利用请求文件地址获取到的响应数据转换成Blob文件对象

  // 下载
  // @param  {String} url 目标文件地址
  // @param  {String} filename 想要保存的文件名称
  function courseDownload(url, filename) {
    getBlob(url, function(blob) {
      saveAs(blob, filename);
    })
  }
  function getBlob(url,cb) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        cb(xhr.response);
      }
    }
    xhr.send();
  }
  // 保存
  // @param  {Blob} blob
  // @param  {String} filename 想要保存的文件名称
  function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, filename);
    } else {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
      window.URL.revokeObjectURL(link.href);
    }
  }

接下来直接调用方法courseDownload就可以轻松实现下载文件的重命名啦

  courseDownload(url, filename);