js blob对象互转

最新推荐文章于 2025-06-18 10:58:54 发布

转载最新推荐文章于 2025-06-18 10:58:54 发布 · 3.2w 阅读

js 专栏收录该内容

50 篇文章

订阅专栏

什么是Blob?
Blob 是什么？这里说的是一种Javascript的对象类型。

oracle 中也有类似的栏位类型。

在 [JS进阶] HTML5 之文件操作(file)
这一篇中用到了File对象，而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。
所以，在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 接口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

如何创建Blob
1. 使用旧方法创建 Blob 对象。

旧的方法使用 BlobBuilder 来创建一个Blob 实例，并且使用一个 append() 方法，将字符串（或者 ArrayBuffer 或者 Blob，此处用 string 举例）插入，一旦数据插入成功，就可以使用 getBlob() 方法设置一个 mime 。

2. 新方法创建Blob 对象

在新的方法中直接可以通过 Blob() 的构造函数来创建了。
构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

type -- MIME 的类型。

endings -- 决定 append() 的数据格式，（数据中的 \n 如何被转换）可以取值为 "transparent" 或者 "native"（t* 的话不变，n* 的话按操作系统转换；t* 为默认）。

Blob的应用
1. 大文件分割 (slice() 方法)

slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其他浏览器则正常的方式 slice()

可以写一个兼容各浏览器的方法：

Original reference： http://blog.youkuaiyun.com/oscar999/article/details/36373183

2. 在Chrome 中指定下载的文件名；
具体可以参考：

Web 端 js 导出csv文件(使用a标签)

引用：https://blog.youkuaiyun.com/oscar999/article/details/16342699

前言

导出文件，使用最多的方式还是服务器端来处理。比如jsp 中使用response 的方式。

但是，有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢？比如说，导出页面的一个表格。

这个需求肯定是有答案的，只是对于各浏览器处理会稍微不一样。(主要是IE 和其他浏览器的区别)。

在IE中使用ActiveXObject 实现，在firefox 和Chrome 中使用 a 标签（或者js）就可以实现了。这里主要讲一下其他浏览器中的实现。

使用 a 标签实现方式

直接上例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
</head>
<body>
<a id="test" download="downlaod.txt" href="data:text/txt;charset=utf-8,download Test Data">download</a>
</body>
</html>

说明一下：

1. download 设置下载的文件名。

2. href 加上 data:text/txt;charset=utf-8 分别设置点击link 是下载文件，编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了。

以多行，多列导出csv 文件

csv 文件可以用Excel打开，如果是导出一个table 的话，使用Excel 就方便很多了。

问题是：如何分行，分列？

理论上：分列使用，号分割，分行用 \n .

可以用以上方式，会发现列可以分开，但是不换行。看上去不认识 \n.

解决方式是使用 encodeURIComponent 进行编码/

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = "col1,col2,col3\nvalue1,value2,value3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,"+str;
aLink.click();
}
</script>
</head>
<body>
<a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
</html>

带中文问题的csv 导出

以上使用的都是utf-8 编码，理论上导出中文应该不是问题。

但是导出csv 格式的话，使用Excel 打开会发现中文是乱码，但是用其他文本程序打开确是正常的。

原因就是少了一个 BOM头 \ufeff。加上一切都正常了

<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="oscar999">
<title>
</title>
<script>
function clickDownload(aLink)
{
var str = "栏位1,栏位2,栏位3\n值1,值2,值3";
str = encodeURIComponent(str);
aLink.href = "data:text/csv;charset=utf-8,\ufeff"+str; // \ufeff是关键
aLink.click();
}
</script>
</head>
<body>
<a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>
</body>
</html>

这里有两个改变

1. 页面的charset 需设置成gb2312

2. 加上 \ufeff BOM 头

Chrome下载的文件名

以上使用 a 的download 属性可以指定下载的文件名及后缀。但是在Chrome 执行的时候会发现， Chrome 压根不理会这个。

下载名是 "下载" 或是 "download".

上网搜索一下，有说是Chrome 的 bug.

参见 stackoverflow 中的两篇文章：

http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chrome
http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-chrome-35-0-1916-114

以上两篇文章可以不去关注，需要关注的是这个问题是否可以解决，以及解决的方法是什么？

直接贴解决方案：