前端文件下载方案：Blob、Fetch、XHR与Axios实战解析

在前端项目中，文件下载功能通常涉及两种主要场景：

第一种情况是后端直接提供一个文件访问地址，用户通过浏览器点击即可触发下载。
第二种情况是前端需要发送特定请求，后端返回二进制流数据，前端解析该流数据并生成临时URL以完成下载。

从前端实现角度看，这主要对应于HTML的a标签和Blob对象两种机制，两者的区别如下：

使用a标签时，对于txt、png、jpg、gif等浏览器可识别格式的文件，通常不会直接下载，而是直接在浏览器中打开，且这种方式在IE等旧版浏览器中存在兼容性问题。
使用blob时，利用Blob对象可以将后端返回的文件流转化为Blob二进制对象。该对象兼容性较好，特别适用于需要动态生成或处理非同源文件流的场景。通过URL.createObjectURL()方法可以将Blob对象转换为一个临时的URL，从而实现下载。

关于Blob对象的基础知识

Blob对象代表一个不可变、原始数据的类文件对象。其数据可以按文本或二进制格式读取，也可以转换为ReadableStream用于进一步的数据操作。Blob对象是HTML5新增的API，主要用于存储二进制数据，例如图片、视频、音频等大文件。

Blob对象的主要属性

size：只读属性，返回Blob对象中包含的字节数。
type：只读属性，表示Blob对象中数据的MIME类型，如图片、视频或文本文件的类型。具体使用方法如下：

const blob = new Blob([], { type: '' });

URL.createObjectURL方法详解

URL.createObjectURL()是一个静态方法，它会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个URL的生命周期与创建它的窗口中的document绑定。这个新的URL对象表示指定的File对象或Blob对象。需要注意的是，当我们的document被销毁后，这个URL就会失效，因此我们需要在合适的时机主动销毁它以释放内存。

简单来说，该方法用于创建一个url，其作用是将一个blob对象转换成一个url，这个url既可以用来下载文件，也可以用来在浏览器中预览文件。

// 创建下载的链接
const url = URL.createObjectURL(blob);
// 释放掉blob对象
URL.revokeObjectURL(url);

传统a标签下载方式

const a = document.createElement('a'); // 创建a标签
a.style = 'display: none';
a.download = filename''; // 设置下载文件名
a.href = url; // 设置下载地址
document.body.appendChild(a);
a.click(); // 触发a标签的click事件
document.body.removeChild(a);

传统的a标签下载方式无法解决浏览器对可识别文件直接打开的问题，但HTML5新增的download属性可以解决这一问题。

a标签结合download属性的用法

当URL指向同源（同域名、同协议、同端口号）资源时，使用a标签加download属性的方式即可实现下载。download属性指示浏览器执行下载操作而非打开文件，同时该属性的值即为下载时保存的文件名；

<a href="path/to/file.jpg" rel="external nofollow"  download='file.jpg'>点击下载图片</a>

const a = document.createElement('a'); // 创建a标签
const e = document.createEvent('MouseEvents'); // 创建鼠标事件对象
e.initEvent('click', false, false); // 初始化事件对象
a.href = url; // 设置下载地址
a.download = filename || ''; // 设置下载文件名
a.dispatchEvent(e);

需要注意的是，a标签下载仅适用于同源文件。如果是跨域的文件，包括图片、音视频等媒体文件，浏览器通常会尝试预览而非下载，且无法通过此方式强制下载。

使用fetch发送请求下载

可以通过原生fetch请求获取数据，动态生成a标签来实现文件下载。
res.blob()是Fetch API中response对象的方法，该方法将后端返回的文件流转换为返回blob的Promise；blob(Binary Large Object)是一个二进制类型的对象，记录了原始数据信息。
URL.createObjectURL(blob)方法的返回值可以理解为一个指向传入参数对象的url，可以通过该url访问参数传入的对象。

// 将url转成blob地址
fetch(url)
    .then(res => res.blob())
    .then(blob => {
        const a = document.createElement('a');
        // 将链接地址字符内容转变成blob地址
        a.href = URL.createObjectURL(blob);
        a.download = filename; // 下载文件的名字
        document.body.appendChild(a);
        a.click();
        // 下载完成后 清除占用的缓存资源
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    });

该方法需要注意的是，即便传入同一个对象作为参数，每次返回的url对象都是不同的。
该url对象保存在内存中，只有在当前文档(document)被卸载时才会被清除，因此为了更好的性能，需要通过URL.revokeObjectURL(blobUrl)主动释放。

使用XMLHttpRequest下载

XMLHttpRequest（简称XHR）是一个用于创建服务器之间通信的Web API。在下载文件时，可以通过设置responseType为blob来接收二进制数据。这种方法适用于需要从服务器获取文件流并进行下载的场景。与Blob类似，XHR也可以用于动态生成文件并触发下载，但它在处理异步请求和数据传输方面提供了更多的灵活性。

可通过xhr.setRequestHeader设置请求头参数。
可通过xhr.getResponseHeader(‘content-disposition’)获取头部参数。

let xhr = new XMLHttpRequest();
// GET请求，downloadURL请求路径url，async(是否异步)
xhr.open('GET', downloadURL, true);
// 设置请求头参数的方式,如果没有可忽略此行代码
xhr.setRequestHeader("Token", 'Bearer ' + getStorage().token); // token
// 设置响应类型为 blob
xhr.responseType = 'blob';
// 关键部分
xhr.onload = function () {
    //如果请求执行成功
    if (this.status === 200) {
        // 下载文件
        const blob = new Blob(this.response);
        const href = window.URL.createObjectURL(blob); // 创建下载的链接
        const a = document.createElement('a');
        a.href = href;
        a.download = fileName; // 下载文件名
        document.body.appendChild(a);
        a.click(); // 点击下载
        document.body.removeChild(a); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
        
        // 可通过xhr.getResponseHeader('content-disposition')头部参数，文件名等
        // let headerParams = xhr.getResponseHeader('content-disposition')?.split(";") || [];
    }
};
// 发送请求
xhr.send();
xhr.onreadystatechange = function () { 
    if (xhr.readyState === 4 && xhr.status === 200) { 
        // 成功后操作 
    } 
};

使用axios请求方式下载

axios({
    method: method ||'post',
    url,
    responseType: 'blob',
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
        // 可在此处添加请求参数
        token: 'token值'
    }
    data: JSON.stringify(params)
}).then(res => {
    if (res) {
        const blob = new Blob(res);
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = href;
        a.download = fileName; // 下载文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放掉blob对象
    } else {
        message.error('下载失败')
        return;
    }
})

无论是通过fetch、XMLHttpRequest、axios请求，处理逻辑都是请求成功后，拿到相应的response，这个response就是我们要下载的内容，通过将它转成blob对象，通过URL.createObjectURL创建下载URL，通过a标签实现下载。

总结

到此这篇关于前端实现文件下载的几种常用方式的文章就介绍到这了,更多相关前端文件下载方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

前端实现文件下载的几种常用方式总结