欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端 h5 文件下载重命名

程序员文章站 2022-04-15 17:58:02
最近有个需求,下载文件后文件名是url地址,重命名成文件原来的名字。特此记录一下。首先尝试一下a标签的download属性;发现不生效后,百度一下发现 由于是前端端分离项目,href属性的地址必须是和你前端js非跨域的地址,不然download属性无效!继续百度发现很多办法都是利用 new Blob() 把文件转成blob文件对象,然后进行下载和保存,然而发现navigator.msSaveBlob方法不生效;(走过的坑就不说了,直接讲方法)let link = document.create...

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

特此记录一下。

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

前端 h5 文件下载重命名
发现不生效后,百度一下发现 由于是前端端分离项目,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

相关标签: javascript html5