Blob对象实现文件下载

原创已于 2024-04-29 15:48:11 修改 · 658 阅读

5 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#javascript #开发语言 #ecmascript

于 2024-04-29 15:39:31 首次发布

本文介绍了如何在网页中实现文件下载功能，通过Blob对象处理二进制数据，利用`downloadStreamByATag`函数生成下载链接，结合axios发送请求获取数据。还涉及到了`URL.createObjectURL`和`URL.revokeObjectURL`的使用以管理文件URL资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，要有下载按钮

<a download onClick={()=> downloadAttentment(data)}>下载</a>

其次，定义下载`function`

// 此处去处理 blob 对象
const downloadStreamByATag = (data, suffix, name) => {
    if (suffix === void 0) { suffix = 'xls'; }
    if (name === void 0) { name = '导出文件'; }
    if (data.type) {
        var blob = new Blob([data]);
        var fileName = name + "." + suffix;
        if ('download' in document.createElement('a')) { // 非IE下载
            var elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
    }
}

// 发送请求
const downloadAttentment = (data)=> {
	return axios.post(url, data).then((res)=> {
    	downloadStreamByATag(res 'xls', '名单') 
	})
}

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

在这里插入图片描述

Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数 array 中给出的值串联而成

new Blob(array, options)

参数
options[可选] 一个可以指定以下任意属性的对象：

type 可选,MIME类型默认值是空字符（“”）。
endings 可选,非标准默认值 transparent 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定，请指定值 native。

URL.createObjectURL()

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

参数 object
用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

返回值
一个DOMString包含了一个对象 URL，该 URL 可用于指定源 object的内容。