JavaScript实现文件下载并重命名的两种方案

引言

本文详细讲解了在JavaScript中实现文件下载并重命名的具体代码实例，内容包含详细的示例代码，对读者的学习或工作具有参考价值。

HTML5 download属性方案

首先介绍第一种方法，该方法源自HTML官方规范。

<a href="/images/liang.jpg" rel="external nofollow" download="文件名称">

在HTML5标准中，a标签新增了filename属性，允许指定下载文件的名称，即通过download属性来定义保存时的文件名。

这种方法在同源访问时运行正常，但一旦涉及跨域请求，往往会遇到跨域错误，或者导致文件在当前页面直接打开而非下载，用户体验较差。

通用Blob下载方案

第二种方案则具有更高的通用性，能够解决跨域场景下的下载重命名需求。

/**
 * 获取 blob
 * url 目标文件地址
 */
function 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();
  });
}

/**
 * 保存 blob   
 * filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    const link = document.createElement('a');
    const body = document.querySelector('body');
　　　
    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = 'none';
    body.appendChild(link);
    
    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}

/**
 * 下载
 * @param {String} url 目标文件地址
 * @param {String} filename 想要保存的文件名称
 */
function download(url, filename) {
  getBlob(url).then(blob => {
    saveAs(blob, filename);
  });
}

总结

以上内容为本文的全部总结，希望能为读者的学习提供帮助，欢迎继续支持本站获取更多技术分享。