肥客泉

肥客联邦
自由无止境.自由的引领.自由的联盟.自由让你我腾飞!为了同一目标而奋斗,为了同一信念而聚一堂,为了网络事业的明天而烈火青春.
肥客因您的支持而成长,因您的关注而精彩闪亮!

肥客是专业的网络应用服务商。我们的团队凭借扎实的技术与优质的服务为企业、公司、政府等部门量身定制软件与网站的网络应用和用户体验。有非凡志向,才有非凡成就。

Web前端js导出csv文件使用a链接标签直拉下载文件保存数据文本换行符的URI不用base64编码


data:text/html newlines csv


利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式

简单的说,data类型的Url大致有下面几种形式。

data:,<文本数据>

data:text/plain,<文本数据>

data:text/html,<HTML代码>

data:text/html;base64,<base64编码的HTML代码>

data:text/plain;charset=UTF-8;base64,<base64编码的HTML代码>

data:text/css,<CSS代码>

data:text/css;base64,<base64编码的CSS代码>

data:text/javascript,<Javascript代码>

data:text/javascript;base64,<base64编码的Javascript代码>

data:image/gif;base64,<base64编码的gif图片数据>

data:image/png;base64,<base64编码的png图片数据>

data:image/jpeg;base64,<base64编码的jpeg图片数据>

data:image/x-icon;base64,<base64编码的icon图片数据>


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

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

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

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


使用 a 标签实现方式 

直接上例子:

[html] view plaincopy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

  2. <html>  

  3.   <head>  

  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  

  5.   <meta name="author" content="oscar999">  

  6.   <title></title>  

  7.   </head>  

  8.   <body>  

  9.     <a id="test" download="downlaod.txt" href="data:text/txt;charset=utf-8,download Test Data">download</a>  

  10.   </body>  

  11. </html>  

 说明一下: 

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

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


以多行,多列导出csv 文件 

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

问题是: 如何分行, 分列?

理论上 : 分列使用 , 号分割, 分行用 \n .

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

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

[html] view plaincopy

  1.   <head>  

  2.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  

  3.   <meta name="author" content="oscar999">  

  4.   <title>  

  5.   </title>  

  6.   <script>  

  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.   </script>   

  15.   </head>  

  16.   <body>  

  17.     <a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>  

  18.   </body>  

  19. </html>  

 带中文问题的csv 导出 

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

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

原因就是少了一个 BOM头 。  \ufeff。

加上一切都正常了,

[html] view plaincopy

  1.    <head>  

  2.   <meta http-equiv="content-type" content="text/html; charset=gb2312">  

  3.   <meta name="author" content="oscar999">  

  4.   <title>  

  5.   </title>  

  6.   <script>  

  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.   </script>   

  15.   </head>  

  16.   <body>  

  17.     <a id="test" onclick="clickDownload(this)" download="downlaod.csv" href="#">download</a>      

  18.   </body>  

  19. </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

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

直接贴解决方案:

[html] view plaincopy

  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 来封装和转换. 问题解决。 

这里如遇中文问题, 和上面的处理方式是一样的:

1. 页面的charset 需设置成gb2312 (设成UTF-8 也可以)

2. 加上 \ufeff BOM 头 

具体的代码类似:

[html] view plaincopy

  1. data = "\ufeff"+data;  

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





引用:http://blog.csdn.net/oscar999/article/details/16342699

评论(1)

© 肥客泉 | Powered by LOFTER