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

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

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

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

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

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

使用XMLHttpRequest解决

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

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

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

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

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

        使用方法如下：

        Download(url, title, artist) {
            var x = new XMLHttpRequest();
            x.open("GET", url, true);
            x.responseType = 'blob';
            x.onload = function () {
                const url = window.URL.createObjectURL(x.response)
                const eleLink = document.createElement("a");
                eleLink.href = url;
                eleLink.download = `${title} - ${artist}`;
                eleLink.style.display = "none";
                document.body.appendChild(eleLink);
                eleLink.click();
                document.body.removeChild(eleLink);
            }
            x.send();
        },

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

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