您的位置：首页 > Web前端 > JavaScript

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

2017-08-29 16:23 459 查看

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

使用 a 标签实现方式

直接上例子：

[html] view plain copy print ?<!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>

<!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 plain copy print ? <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>

<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 plain copy print ? <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>

<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
以上两篇文章可以不去关注，需要关注的是这个问题是否可以解决，以及解决的方法是什么？
直接贴解决方案：

[html] view plain copy print ?var blob = new Blob([data], { type: ‘text/csv’ }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById(“mylink”).href = csvUrl;

var blob = new Blob([data], { type: 'text/csv' }); //new way
var csvUrl = URL.createObjectURL(blob);
document.getElementById("mylink").href = csvUrl;

使用Blob 和URL 来封装和转换. 问题解决。

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

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

2. 加上 \ufeff BOM 头具体的代码类似：

[html] view plain copy print ?data = “\ufeff”+data;
var blob = new Blob([data], { type: ‘text/csv,charset=UTF-8’});

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

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

<div id="digg" articleid="16342699">
<dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

<dt>顶</dt>
<dd>9</dd>
</dl>

<dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

<dt>踩</dt>
<dd>1</dd>
</dl>

</div>
<div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
<script type="text/javascript">
function btndigga() {
$(".tracking-ad[data-mod='popu_222'] a").click();
}
function btnburya() {
$(".tracking-ad[data-mod='popu_223'] a").click();
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航