优雅-下载篇

产品: 页面加个链接，下载文件用！
我: 好嘞！一分钟。

a标签的target属性加上url不就行了吗？啪的一下很快啊！

a标签

<a target="https://example.com/xxx.xslt" download="xxx.xslt">下载文件</a>

产品: 下载倒是可以下载，页面怎么老闪一下嘞？
我: 晓得了，再给一分钟！

大意了，页面闪了我没闪！这是因为触发a标签的点击事件后，浏览器会打开一个新的页面或标签页来下载文件，从而导致页面的刷新和闪烁。
解决思路可以使用 XMLHttpRequest 对象来实现文件下载

BOM的XMLHttpRequest对象

function downloadFile(url, filename) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.onload = function () {
      var blob = xhr.response;
      var url = URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = url;
      link.download = filename;
      link.click();
    };
    xhr.send();
}

产品: 👍👍👍你是世界上最好的开发！
我: 😁😁😁
...
同事: 要不你百度下XMLHttpRequest的缺点？

XMLHttpRequest会引起内存泄漏？同源策略下载不了？不讲武德！a标签的download属性已经支持了跨域下载，让代码可读点，拥抱ES6换Promise上阵吧。

Promise对象

asyncDownloadFile = async (fileUrl, fileName) => {
    const url = await Promise.resolve(fileUrl);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
    // 释放内存
    URL.revokeObjectURL(url);
};

起码代码量少了哈，优雅！
下面有请各位前端老鸟们CR。👏👏👏