乘风原创程序

  • 前端 h5 文件下载重命名
  • 2020/9/28 16:07:52
  • 最近有个需求,下载文件后文件名是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