前端-a标签实现下载功能

        最近在一个项目中需要实现下载功能，在前期与后端多次联调尝试使用接口下载文件无果后，最后抱着试一试的心态使用了A标签下载，方法是有效的，但是有部分局限性！！！

        使用a标签实现下载的步骤如下：

1.  
   Download(url, title, artist) {
2.  
   const eleLink = document.createElement("a"); // 新建A标签
3.  
   eleLink.href = url; // 下载的路径
4.  
   eleLink.download = `${title} - ${artist}`; // 设置下载的属性，可以为空
5.  
   eleLink.style.display = "none";
6.  
   document.body.appendChild(eleLink);
7.  
   eleLink.click(); // 触发点击事件
8.  
   document.body.removeChild(eleLink);
9.  
   }

        但是！！！！这个方法会有一个局限性！！！我们在使用a标签实现下载功能时，必须保证是在同源情况下，当发起请求的地址和所需下载文件的地址形成跨域情况时，此时A标签会形成跳转，而不是下载功能。

         如果要实现使用a标签跨域下载，可以使用下面的方法：

使用XMLHttpRequest解决

• 可以发送跨域请求，在服务端允许的情况下；

• 支持发送和接收二进制数据；

• 新增formData对象，支持发送表单数据；

• 发送和获取数据时，可以获取进度信息；

• 可以设置请求的超时时间；

        使用方法如下：

1.  
   Download(url, title, artist) {
2.  
   var x = new XMLHttpRequest();
3.  
   x.open("GET", url, true);
4.  
   x.responseType = 'blob';
5.  
   x.onload = function () {
6.  
   const url = window.URL.createObjectURL(x.response)
7.  
   const eleLink = document.createElement("a");
8.  
   eleLink.href = url;
9.  
   eleLink.download = `${title} - ${artist}`;
10.  
    eleLink.style.display = "none";
11.  
    document.body.appendChild(eleLink);
12.  
    eleLink.click();
13.  
    document.body.removeChild(eleLink);
14.  
    }
15.  
    x.send();
16.  
    },

        是不是很简单~其实原理就是将文件转为blob文件流的形式，再下载。

        当然了，前端下载文件的方式并不只有这一种，更多的还是通过请求实现下载功能，这种方法感觉还是查那么点意思，如果后续学到更好的下载方式，会在本篇博客中补充哦 ~ 欢迎大家一起讨论~

这篇好文章是转载于：学新通技术网