导出文件,使用最多的方式还是服务器端来处理。比如jsp 中使用response 的方式。
但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格。
这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样。(主要是IE 和其他浏览器的区别)。
在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用 a 标签(或者js)就可以实现了。 这里主要讲一下其他浏览器中的实现。
使用 a 标签实现方式
直接上例子:
- <!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 进行编码/
- <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” οnclick=“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>
<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” οnclick=“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
以上两篇文章可以不去关注, 需要关注的是这个问题是否可以解决, 以及解决的方法是什么?
直接贴解决方案:
- 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 也可以)
具体的代码类似:
- 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’});
<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>
<div style="clear:both; height:10px;"></div>
<div class="similar_article">
<h4></h4>
<div class="similar_c" style="margin:20px 0px 0px 0px">
<div class="similar_c_t">
相关文章推荐
</div>
<div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height:250px">
<ul class="similar_list fl">
<li>
<em>•</em>
<a href="http://blog.csdn.net/wuhouz/article/details/51372481" title="Web 端 js 导出csv文件(使用a标签)" strategy="BlogCommendFromCsdn_0" target="_blank">Web 端 js 导出csv文件(使用a标签)</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/huiyiCourse/series_detail/54?utm_source=blog7" title="【直播】机器学习&数据挖掘7周实训--韦玮" strategy="undefined" target="_blank">【直播】机器学习&数据挖掘7周实训--韦玮</a>
</li>
<li>
<em>•</em>
<a href="http://download.csdn.net/download/lhx222/3681587" title="java web struts,Spring,jstl,js,ajax,velocity,freemarker标签大全" strategy="BlogCommendFromCsdn_1" target="_blank">java web struts,Spring,jstl,js,ajax,velocity,freemarker标签大全</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/huiyiCourse/detail/501?utm_source=blog7" title="【直播】大中型UGC信息网站SEO分享--乔向阳" strategy="undefined" target="_blank">【直播】大中型UGC信息网站SEO分享--乔向阳</a>
</li>
<li>
<em>•</em>
<a href="http://download.csdn.net/download/wangshuxuncom/7457173" title="演示web.xml文件中error-page标签的使用.zip" strategy="BlogCommendFromCsdn_2" target="_blank">演示web.xml文件中error-page标签的使用.zip</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/huiyiCourse/series_detail/60?utm_source=blog7" title="【直播】打通Linux脉络 进程、线程和调度--宋宝华" strategy="undefined" target="_blank">【直播】打通Linux脉络 进程、线程和调度--宋宝华</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/LoveTea99/article/details/52056390" title="Web端导出CSV" strategy="BlogCommendFromCsdn_3" target="_blank">Web端导出CSV</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/combo/detail/240?utm_source=blog7" title="【套餐】Java高级程序员专业学习路线--肖海鹏" strategy="undefined" target="_blank">【套餐】Java高级程序员专业学习路线--肖海鹏</a>
</li>
</ul>
<ul class="similar_list fr">
<li>
<em>•</em>
<a href="http://download.csdn.net/download/johnny_k/3310023" title="web页面导入csv文件" strategy="BlogCommendFromCsdn_4" target="_blank">web页面导入csv文件</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/course/detail/474?utm_source=blog7" title="【课程】C++语言基础--贺利坚" strategy="undefined" target="_blank">【课程】C++语言基础--贺利坚</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/haoshidai/article/details/50809598" title="前端学习总结(七)Angular.js——以数据交互为核心的前端框架" strategy="BlogCommendFromCsdn_5" target="_blank">前端学习总结(七)Angular.js——以数据交互为核心的前端框架</a>
</li>
<li>
<em>•</em>
<a href="http://edu.csdn.net/course/detail/5222?utm_source=blog7" title="【课程】深度学习基础与TensorFlow实践--AI100" strategy="undefined" target="_blank">【课程】深度学习基础与TensorFlow实践--AI100</a>
</li>
<li>
<em>•</em>
<a href="http://download.csdn.net/download/lemon_zhao/9711434" title="js生成csv文件下载" strategy="BlogCommendFromCsdn_6" target="_blank">js生成csv文件下载</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/Lpandeng/article/details/60317569" title="js 资源大全" strategy="BlogCommendFromCsdn_7" target="_blank">js 资源大全</a>
</li>
<li>
<em>•</em>
<a href="http://download.csdn.net/download/w2140605827/9893586" title="可将HTML表格导出为Excel_csv_txt文件的jQuery插件" strategy="BlogCommendFromCsdn_8" target="_blank">可将HTML表格导出为Excel_csv_txt文件的jQuery插件</a>
</li>
<li>
<em>•</em>
<a href="http://blog.csdn.net/ljl_xyf/article/details/8206417" title="FusionCharts图表控件中文版使用手册" strategy="BlogCommendFromCsdn_9" target="_blank">FusionCharts图表控件中文版使用手册</a>
</li>
</ul>
</div>
</div>
</div>
更多文章请扫码关注公众号,有问题的小伙伴也可以在公众号上提出。