时间戳

首页 > 技术文章 > Web 端 js 导出csv文件(使用a标签)

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

timejs 2015-08-04 17:39 原文

前言

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

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

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

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

使用 a 标签实现方式

直接上例子：

 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>

 

 

说明一下：

 

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;
         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

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

直接贴解决方案：

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 头

具体的代码类似：

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

本文转自（http://blog.csdn.net/oscar999/article/details/16342699#t2）

推荐阅读