JavaScript----JS下载文件重命名不生效即a.download修改文件名不生效的解决办法

【原文链接】JavaScript----JS下载文件重命名不生效即a.download修改文件名不生效的解决办法

问题分析

首先看如下一段js下载文件的代码，这里对link.download 进行了文件重命名，但是执行后发现重命名并未生效，这是因为这里的link.href与网站域名存在跨域了，当跨域时重命名会失效，会直接显示下载文件链接中的文件名。

const link = document.createElement('a')
link.download = file_name
link.style.display = 'none'
link.href = 'https://xxx.com/xxxxxx.rar'
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href)
document.body.removeChild(link)

解决办法

网上能查询到的一般提供如下两种方式，一种是如下方式，这种方式是可以实现文件重命名的，但是也存在一个问题，就是当文件比较大的时候，点击下载后没有任何反应，因为它是等待文件下载完成后才会在浏览器中显示下载进度条的。

handleDownload(item) {
    var xml = new XMLHttpRequest();
    xml.open('GET', item.fileUrl, true);
    xml.responseType = 'blob';
    xml.onload = function () {
        var url = window.URL.createObjectURL(xml.response);
        var a = document.createElement('a');
        a.href = url;
        a.download = item.fileName;
        a.click();
    };
    xml.send();
}

还有一种方式就是类似如下方式，这种方式同样也是可以做到文件名重命名生效，但是同样存在当文件比较大时，点击下载按钮后要过很长时间才会显示出下载进度条，即首先将文件下载后才会在浏览器中显示出来。

import axios from 'axios'
downloadFile(item) {
  axios
  .get(item.fileUrl, { responseType: 'blob' })
  .then(res => {
    const blob = new Blob([res.data])
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download =item.fileName
    link.click()
    URL.revokeObjectURL(link.href)
  })
  .catch(console.error)
}

显然这两种方式都不是最佳的解决方案，因此最好的解决方案是在设计之初就要考虑到这个问题，即直接将文件名作为网络存储的链接，即下载文件时无需修改文件名，那么此时就可以直接使用本文开头的下载js代码即可。

假如不幸在设计之初没有考虑到这个问题，即网络存储的文件链接可能存为一串随机字符串，但是下载时仍然希望显示出文件原有的名字，同时希望当点击下载按钮后立即弹出下载窗口，此时可以考虑在nginx中做一下反向代理，即配置一个和网站同源的一个域名，然后在设置一个二级域名，比如网站域名为 http://xxx.com, 则可以在nginx中设置一个类似 http://xxx.com/storage 的二级域名，然后反向代理到当前跨域的存储域名上，这样再使用本文开头的下载文件的js代码时就不存在跨域的问题了。