Web 端 js 导出csv文件(使用a标签)
来源:互联网 发布:淘宝淘金币大转盘漏洞 编辑:程序博客网 时间:2024/06/12 00:45
前言
导出文件,使用最多的方式还是服务器端来处理。比如jsp 中使用response 的方式。
但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格。
这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样。(主要是IE 和其他浏览器的区别)。
在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用 a 标签(或者js)就可以实现了。 这里主要讲一下其他浏览器中的实现。
使用 a 标签实现方式
直接上例子:
说明一下:1. download 设置下载的文件名。
2. href 加上 data:text/txt;charset=utf-8 分别设置点击link 是下载文件, 编码是utf-8 . 这个逗号后面的就是保存在文件中的内容了。
以多行,多列导出csv 文件
csv 文件可以用Excel打开, 如果是导出一个table 的话,使用Excel 就方便很多了。
问题是: 如何分行, 分列?
理论上 : 分列使用 , 号分割, 分行用 \n .
可以用以上方式,会发现列可以分开,但是不换行。 看上去不认识 \n.
解决方式是使用 encodeURIComponent 进行编码/
带中文问题的csv 导出
以上使用的都是utf-8 编码,理论上导出中文应该不是问题。
但是导出csv 格式的话, 使用Excel 打开会发现中文是乱码,但是用其他文本程序打开确是正常的。
原因就是少了一个 BOM头 。 \ufeff。
加上一切都正常了,
这里有两个改变
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
以上两篇文章可以不去关注, 需要关注的是这个问题是否可以解决, 以及解决的方法是什么?
直接贴解决方案:
使用Blob 和URL 来封装和转换. 问题解决。
这里如遇中文问题, 和上面的处理方式是一样的:
1. 页面的charset 需设置成gb2312 (设成UTF-8 也可以)
具体的代码类似:
- Web 端 js 导出csv文件(使用a标签)
- Web 端 js 导出csv文件(使用a标签)
- Web 端 js 导出csv文件(使用a标签)
- Web 端 js 导出csv文件(使用a标签)
- Web 端 js 导出csv文件(使用a标签)
- Web 端 js 导出csv文件(使用a标签)
- Web端导出CSV
- Web端导出CSV
- java web 导出csv文件
- csv.js导出csv
- java web app 导出csv excel 文件
- a标签保存数据到csv文件
- js和Java导出Excel,csv文件
- 用JS分析、导出CSV文件
- Java 导出CSV文件及实现web下载CSV
- Silverlight4使用radgridview读取导出CSV文件
- 使用PHP导入和导出CSV文件
- 使用PHP导入和导出CSV文件
- 进程与线程的一个简单解释
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition)
- 字符串哈希表
- SharedPreferences的使用浅析
- SSM框架——使用MyBatis Generator自动创建代码
- Web 端 js 导出csv文件(使用a标签)
- Spring4新特性:Groovy Bean定义DSL
- ExcelUtil工具类,使用Java代码操作Excel表格
- 【TOF-3D】学习笔记(1)-上层界面的功能设计
- [BZOJ4033][HAOI2015]T1(树形dp)
- Python开发工具PyCharm个性化设置
- MySQL存储引擎总结
- java 键盘输入数据
- sql server 定期自动清理日志