Web 端 js 导出csv文件(使用a标签)_js使用ansi格式下载csv文件-优快云博客

本文介绍了一种使用前端技术导出CSV文件的方法，包括如何利用HTML5的a标签和JavaScript处理多行多列数据，以及解决中文乱码问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

使用 a 标签实现方式

直接上例子：

[html]view plaincopy 
   
 <!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 进行编码/

[html]view plaincopy 
   
   <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。

加上一切都正常了，

[html]view plaincopy 
   
    <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>  