Blob对象

2022-8-25 11:12:12

#前端#数据流

95

前言

最近工作中遇到了Blob对象，关于这个东西我了解甚少，因此在工作的过程中踩了不少坑，因此作一笔记与总结。

正文

Blob是什么

  • Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。
  • 其中Blob表示的不一定是JavaScript 原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

Blob的api

Blob工作场景

  • 这次工作上会遇到Blob的原因是要给淘宝的千牛端做excel文件导出功能，原本web端的做法是后端返回一个对应的文件数据流，前端这边会收到一个Blob对象，对应这一个文件数据流，接着处理导出。
  • 具体代码如下
// blob即为Blob对象
let a = document.createElement(\"a\");
// window.URL.createObjectURL创建一个新的 URL 对象表示指定的 File 对象或 Blob 对象。
a.href = window.URL.createObjectURL(blob);
a.download = so.fileName + '-' + moment().format(\"YYYY-MM-DD_HH-mm\") + formatType;
a.click();
  • 但是由于千牛端的特殊性，我们只能通过淘宝提供的cloud.application.httpRequest来调用后端接口。而这一个api会自动将文件流转为字符串的形式返还给我，而在这一过程中，返还的字符串中的中文字符全部都变为乱码了。
  • 我们接收的数据类型是'Content-Type': 'application/octet-stream;charset=iso-8859-1'，后续查询得知iso-8859-1为单字节字符集，本身就是不支持中文字符的,所以导致了导出的excel文件是中文乱码的情况。
  • 针对这一问题，根本上的解决方法就是让后端给我传以utf-8的字符集编码的文件流。
  • 不知道为什么有些平台老喜欢自己搞一个客户端，但是这个客户端又是阉割版的封装浏览器，结果导致我们要在代码上做很多的特殊兼容处理。（纯吐槽）

Github登录