Blob对象

[JS进阶] JS 之Blob 对象类型

什么是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 。
1.   
2.   var builder = new BolbBuilder();  
3.   builder.append("Hello World!");  
4.   var blob = builder.getBlob("text/plain");  
  

1. 新方法创建Blob 对象
   在新的方法中直接可以通过 Blob() 的构造函数来创建了。
   构造函数，接受两个参数，第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：
   type – MIME 的类型。
   endings – 决定 append() 的数据格式，（数据中的 \n 如何被转换）可以取值为 “transparent” 或者 “native”（t* 的话不变，n* 的话按操作系统转换；t* 为默认） 。

2.   

3.   var blob = new Blob([“Hello World!”],{type:”text/plain”});  
4.   

Blob的应用
1. 大文件分割 (slice() 方法)
slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。
当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的 Blob 对象和原始的是独立存在的。

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

1. function sliceBlob(blob, start, end, type) {  
2.   type = type || blob.type;  
3.   if (blob.mozSlice) {  
4.       return blob.mozSlice(start, end, type);  
5.   } else if (blob.webkitSlice) {  
6.       return blob.webkitSlice(start, end type);  
7.   } else {  
8.       throw new Error(“This doesn’t work!”);  
9.   }  
10. }  

Web 端 js 导出csv文件(使用a标签)
目录(?)[+]
前言
导出文件，使用最多的方式还是服务器端来处理。比如jsp 中使用response 的方式。
但是，有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢？ 比如说，导出页面的一个表格。
这个需求肯定是有答案的，只是对于各浏览器处理会稍微不一样。(主要是IE 和其他浏览器的区别)。
在IE中使用ActiveXObject 实现，在firefox 和Chrome 中使用  a 标签（或者js）就可以实现了。 这里主要讲一下其他浏览器中的实现。

使用 a 标签实现方式
直接上例子：
[html] 
view plain 
copy
 

1.   
2.   
3.     
4.     
5.     
6.     
7.     
8.     
9.     download  
10.     
11.   
    说明一下：
12. download 设置下载的文件名。
13. href 加上 data:text/txt;charset=utf-8  分别设置点击link 是下载文件， 编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了。

以多行，多列导出csv 文件
csv 文件可以用Excel打开， 如果是导出一个table 的话，使用Excel 就方便很多了。
问题是： 如何分行， 分列？
理论上 ： 分列使用 ， 号分割， 分行用 \n .
可以用以上方式，会发现列可以分开，但是不换行。 看上去不认识 \n.
解决方式是使用 encodeURIComponent 进行编码/
[html] 
view plain 
copy
 

1.     
2.     
3.     
4.     
5.     
6.     
7.     function clickDownload(aLink)  
8.     {  
9.          var str = “col1,col2,col3\nvalue1,value2,value3”;  
10.          str =  encodeURIComponent(str);  
11.          aLink.href = “data:text/csv;charset=utf-8,”+str;  
12.          aLink.click();  
13.     }  
14.    
15.     
16.     
17.     download  
18.     
19.   

带中文问题的csv 导出
以上使用的都是utf-8 编码，理论上导出中文应该不是问题。
但是导出csv 格式的话， 使用Excel 打开会发现中文是乱码，但是用其他文本程序打开确是正常的。
原因就是少了一个 BOM头 。  \ufeff。
加上一切都正常了，
[html] 
view plain 
copy
 

1.      
2.     
3.     
4.     
5.     
6.     
7.     function clickDownload(aLink)  
8.     {  
9.          var str = “栏位1,栏位2,栏位3\n值1,值2,值3”;  
10.          str =  encodeURIComponent(str);  
11.          aLink.href = “data:text/csv;charset=utf-8,\ufeff”+str;  
12.          aLink.click();  
13.     }  
14.    
15.     
16.     
17.     download      
18.     
19.   
    这里有两个改变
20. 页面的charset 需设置成gb2312
21. 加上 \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
以上两篇文章可以不去关注， 需要关注的是这个问题是否可以解决， 以及解决的方法是什么？
直接贴解决方案：
[html] 
view plain 
copy
 

1. var blob = new Blob([data], { type: ‘text/csv’ }); //new way  
2. var csvUrl = URL.createObjectURL(blob);  
3. document.getElementById(“mylink”).href = csvUrl;   
   使用Blob 和URL 来封装和转换. 问题解决。
   这里如遇中文问题， 和上面的处理方式是一样的：
4. 页面的charset 需设置成gb2312 （设成UTF-8 也可以）

5. 加上 \ufeff BOM 头
   具体的代码类似：
   [html] 
   view plain 
   copy
    

6. data = “\ufeff”+data;  

7. var blob = new Blob([data], { type: ‘text/csv,charset=UTF-8’});