利用a标签导出csv文件

原文

博客原文

大纲

1、需求分析
2、通过a标签实现文件导出
3、实现方式

1、需求分析

导出文件，使用最多的方式还是服务器端来处理。比如jsp中使用response的方式。
但是，有时候可能就想使用web前端是否也可以把页面上的内容导出来呢？比如说，导出页面的一个表格。
这个需求肯定是有答案的，只是对于各浏览器处理会稍微不一样。(主要是IE和其他浏览器的区别)。
在IE中使用ActiveXObject 实现，在firefox 和Chrome 中使用a标签（或者js）就可以实现了。
前端导出文件大部分还是通过服务器端的方式生成文件，然后传递到客户端。但很多情况下当我们导出CSV时并不需要后端参与，甚至没有后端。
做过WebGIS的同学经常会碰到这种场景，用户的兴趣点数据以csv文件形式上传到web应用中以表格形式展示，并可以编辑属性信息，编辑完成后需要将数据下载到本地。特别是对一些敏感数据，用户不希望传递到应用服务器端，整个过程完全在客户端进行。

2、通过a标签实现文件导出

2.1、通过a标签实现导出文件有两种方式

1、通过href属性来实现文件导出
2、通过download属性来实现文件导出（IE不兼容）
3、通过navigator.msSaveBlob来实现（IE专属，谷歌火狐不兼容）

2.2、需要注意

1、IE有独有的方法
2、谷歌和火狐推荐使用结合Bolb、createObjectURL的方式(需要注意这两者可能在低版本浏览器不兼容的情况)
3、需要注意的是在将数据导出成csv的时候需要先将数据转换成对应的格式，这样才能整齐导出

3、实现方式

3.1、IE浏览器

3.1.1、IE浏览器(IE10以下)

IE10以下，利用execCommand方法来保存csv文件
在实际应用中浏览器会打开一个新窗口，并弹出保存文件对话框，而对话框中保存类型时，只有html和text两项可选，此时需要在文件名中手动加上“.csv”后缀。

 
    
    
    
    
    
    
    download  
   
       
  

3.1.2、IE浏览器(IE10以上)

IE10以及Edge浏览器使用navigator.msSaveBlob（blob）；虽然这些浏览器也支持execCommand的方法，但可以避免需要手动添加文件后缀。
msSaveBlob是IE的私有方法，只有IE10及以上和Edge浏览器支持。

 
    
    
    
    
    
    
    download  
   
       
  

3.2、Firefox、Chrome、Safari

3.2.1、 download基本使用模式

 
    
    
    
    
    
    
    download  
   
       
  

3.2.2、利用a标签的href和download属性

 
    
    
    
    
    
    
    download  
   
       

3.2.3、对href的属性进行设置——使用createObjectURL创建连接，适用于较大的文件

 
    
    
    
    
    
    
    download  
   
       
  

3.3.4、数据转换成Blob形式再设置为href的值

 
    
    
    
    
    
    
    download  
   
       
  

参考网址

https://www.cnblogs.com/dojo-lzz/p/4837041.html
http://blog.csdn.net/oscar999/article/details/16342699