ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端实现文件下载的几种方法 [打印本页]

---

作者: 用户国营    时间: 2024-12-25 22:07
标题: 前端实现文件下载的几种方法
以下是工作中前端常见的文件下载的几种方法。接待各人补充指正。
一、location.href

对于一些欣赏器无法识别的文件格式，可以直接再欣赏器地点栏输入url即可触发欣赏器的下载功能。对于单文件下载没有什么问题，但是如果下载多文件，点击过快就会重置掉前面的请求。
适用场景：

• get请求
  
• 单文件下载
  

1. window.location.href = url;

复制代码

二、window.open

和location.href类似

1. window.open(url);

复制代码

三、a标签

直接下载仅适用于欣赏器无法识别的文件。如果是欣赏器支持的文件格式，如html、jpg、png、pdf等，则不会触发文件下载，而是直接被欣赏器分析并展示，这种情况下，可以利用a标签下载文件，download属性可以设置文件名。适用于单文件下载，如果下载多文件，点击过快就会重置掉前面的请求。
适用场景：

• get请求
  
• 单文件下载
  
• 需要自界说文件名
  

1. //写法1
2. const download = (filename, url) => {
3.     let a = document.createElement('a');
4.     a.style = 'display: none'; // 创建一个隐藏的a标签
5.     a.download = filename;
6.     a.href = url;
7.     document.body.appendChild(a);
8.     a.click(); // 触发a标签的click事件
9.     document.body.removeChild(a);
10. }
11. // 写法2
12. <a href="/images/download.jpg" download="myFileName">

复制代码

注意：有时候对于欣赏器可识别的文件格式，我们还是需要直接下载的情况，可以声明一下文件的header的 Content-Disposition信息，告诉欣赏器，该链接为下载附件链接，而且可以声明文件名。

1. Content-Disposition: attachment; filename="filename.xls"

复制代码

四、文件流

如果需要利用post请求，且后端返回是一个文件流形式，那么前端需要自己将文件流转成链接，然后下载。 二进制流大概长这样：

适用场景：

• post请求
  
• get请求
  
• 多文件
  

1.请求的方式

注意：不可以利用JQuery，因为JQuery不支持blob范例。
原生js写法

1. const req = new XMLHttpRequest();
2. req.open('POST', '/download/excel', true);
3. req.responseType = 'blob'; //如果不指定，下载后文件会打不开
4. req.setRequestHeader('Content-Type', 'application/json');
5. req.onload = function() {
6.     var content = req.getResponseHeader("Content-Disposition") ;
7.     // 文件名最好用后端返的Content-disposition
8.     // 需要后端设置 Access-Control-Expose-Headers: Content-disposition 使得浏览器将该字段暴露给前端
9.     var name = content && content.split(';')[1].split('filename=')[1];
10.     var fileName = decodeURIComponent(name)
11.     downloadFile(req.response,fileName)
12. };
13. req.send( JSON.stringify(params));

复制代码

 axios写法

1. axios({
2.   method: 'post',
3.   headers: {
4.     'Content-Type': 'application/json; charset=utf-8'
5.   },
6.   url: '/robot/strategyManagement/analysisExcel',
7.   responseType: 'blob',
8.   headers: { //如果需要权限下载的话，加在这里
9.         Authorization: '123456'
10.     }
11.   data: JSON.stringify(params),
12. }).then(function(res){
13.    var content = res.headers['content-disposition'];
14.    var name = content && content.split(';')[1].split('filename=')[1];
15.    var fileName = decodeURIComponent(name)
16.    downloadFile(res.data,fileName)
17. })

复制代码

2.文件下载的方式

通过URL.createObjectURL()下载

URL.createObjectURL() 静态方法会创建一个DOMString，其中包罗一个表现参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的document绑定。

1. downloadFile:function(data,fileName){
2.     // data为blob格式
3.     var blob = new Blob([data]);
4.     var downloadElement = document.createElement('a');
5.     var href = window.URL.createObjectURL(blob);
6.     downloadElement.href = href;
7.     downloadElement.download = fileName;
8.     document.body.appendChild(downloadElement);
9.     downloadElement.click();
10.     document.body.removeChild(downloadElement);
11.     window.URL.revokeObjectURL(href);
12. }

复制代码

通过# FileReader.readAsDataURL()下载

readAsDataURL() 方法会读取指定的 Blob 或 File 对象。读取操作为异步操作，当读取完成时，可以从onload回调函数中通过实例对象的result属性获取data:URL格式的字符串（base64编码），此字符串即为读取文件的内容，可以放入a标签的href属性中。

1. downloadFile:function(data,fileName){
2.    const reader = new FileReader()
3.    // 传入被读取的blob对象
4.    reader.readAsDataURL(data)
5.    // 读取完成的回调事件
6.    reader.onload = (e) => {
7.        let a = document.createElement('a')
8.        a.download = fileName
9.        a.style.display = 'none'
10.        // 生成的base64编码
11.        let url = reader.result
12.        a.href = url
13.        document.body.appendChild(a)
14.        a.click()
15.        document.body.removeChild(a)
16.    }
17. }

复制代码

两者的区别

• 返回值 FileReader.readAsDataURL(blob)可以得到一段base64的字符串。
  URL.createObjectURL(blob)得到的是当前文件的一个内存 URL。
  
• 内存 FileReader.readAsDataURL(blob)依照js垃圾接纳机制自动从内存中清算。 URL.createObjectURL(blob)存在于当前document内，扫除方式通过revokeObjectURL()手动扫除。
  
• 实行方式 FileReader.readAsDataURL(blob)通过回调的方式f返回，异步实行。
  URL.createObjectURL(blob) 直接返回，同步实行。
  
• 多个文件 FileReader.readAsDataURL(blob)同时处置惩罚多个文件时，需要一个文件对应一个FileReader对象URL.createObjectURL(blob) 依次返回，没有影响。
  
• 优势对比 URL.createObjectURL(blob)得到当地内存容器的 URL地点，方便预览，需要注意手动释放内存的问题，性能优秀。
  FileReader.readAsDataURL(blob)可直接转为base64格式，直接用于业务。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4