前端 h5 文件下载重命名

最近有个需求，下载文件后文件名是url地址，重命名成文件原来的名字。

特此记录一下。

首先尝试一下a标签的download属性；

发现不生效后，百度一下发现 由于是前端端分离项目，href属性的地址必须是和你前端js非跨域的地址，不然download属性无效！

继续百度

发现很多办法都是利用 new Blob() 把文件转成blob文件对象，然后进行下载和保存，然而发现navigator.msSaveBlob方法不生效；（走过的坑就不说了，直接讲方法）

let link = document.createElement('a');
      axios.get(url,{
      	responseType: 'blob',// 不加type值下载文件后会出现乱码
      }).then(res=>{
        let blob = new Blob([res.data])
        let objectUrl = URL.createObjectURL(blob) // 创建URL
        link.href = objectUrl;
        link.download = i.cf_name?i.cf_name:''; // 自定义文件名
        link.click() // 下载文件
        URL.revokeObjectURL(objectUrl); // 释放内存
      })

这里呢是利用请求文件地址获取到的响应数据转换成 Blob 文件对象，然后创建一个a标签，吧 我们转换的数据当做 href地址，最最最重要的一步， 添加上download名称，随后自助点击事件（手动狗头）并释放内存即可；

其实我也不太明白这个原理是什么，请求到的文件url响应的是什么？ 大佬们看到可以评论说一下~ 谢谢啦
（可以的话，直接后端转成文件流的方式是最好的，多学习一下也不坏）

本文地址：https://blog.csdn.net/weixin_44648749/article/details/108850726