【转载】JS导出CSV文件
转自：http://www.cnblogs.com/dengnan/p/3990211.html
通过自己实际测试有以下几种方法
方法一通过a标签实现，把要导出的数据用“\n”和“,”拼接成一个字符串，然后把字符串放到href中，这种方法只支持chrome，firefox等非ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>导出CSV文件</title>
<script>
function exportCsv(obj){
//title ["","",""]
var title = obj.title;
//titleForKey ["","",""]
var titleForKey = obj.titleForKey;
var data = obj.data;
var str = [];
str.push(obj.title.join(",")+"\n");
for(var i=0;i<data.length;i++){
var temp = [];
for(var j=0;j<titleForKey.length;j++){
temp.push(data[i][titleForKey[j]]);
}
str.push(temp.join(",")+"\n");
}
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str.join(""));
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "export.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
window.onload = function(){
document.getElementById("test").onclick = function(){
exportCsv({
title:["第一列","第二列"],
titleForKey:["num1","num2"],
data:[
{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
},{
num1:"123",
num2:"fff"
}]
});
}
}
</script>
</head>
<body>
<a id="test" href="javascript:;">导出</a>
</body>
</html>
第二种方法通过ActiveXObject("Excel.Application")实现，这种方法只支持ie浏览器
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script>
window.onload = function(){
function exportCsv(){
//创建AX对象excel
var oXL = new ActiveXObject("Excel.Application");
//获取workbook对象
var oWB = oXL.Workbooks.Add();
//激活当前sheet
var oSheet = oWB.ActiveSheet;
var Lenr = [["标题一","标题二","标题三"],["4","5","6"],["1","2","3"]];
for (i = 0; i < Lenr.length; i++) {
for (j = 0; j < Lenr[i].length; j++) {
oSheet.Cells(i + 1, j + 1).value = Lenr[i][j];
}
}
//设置excel可见属性
oXL.Visible = true;
}
document.getElementById("J_export").onclick = function(){
exportCsv();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
第三种方法也是目前项目中正在使用的
通过使用FileSave.js实现FileSave.js插件https://github.com/eligrey/FileSaver.js/
html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE导出CSV</title>
<script src="FileSaver.js"></script>
<script>
window.onload = function(){
function exportCsv2(){
//Excel打开后中文乱码添加如下字符串解决
var exportContent = "\uFEFF";
var blob = new Blob([exportContent+"标题,标题,标题\n1,2,3\n4,5,6"],{type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.csv");
}
document.getElementById("J_export").onclick = function(){
exportCsv2();
}
}
</script>
</head>
<body>
<a href="javascript:;" id="J_export">导出</a>
</body>
</html>
【转载】JS导出CSV文件的更多相关文章
- Web 端 js 导出csv文件(使用a标签)
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- Web 端 js 导出csv文件
http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html
- EasyUI 如何结合JS导出Excel文件
出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...
- web前端导出csv文件
前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这 ...
- ASP.NET MVC 导出CSV文件
ASP.NET MVC 导出CSV文件.直接贴代码 /// <summary> /// ASP.NET MVC导出CSV文件Demo1 /// </summary> /// ...
- 解决bcp导出CSV文件没有表头
思路: 1.输出表头文件到指定目录 2.bcp导出csv文件到temp目录 3.将以上导出文件与表头文件合并 4.删除temp目录下的文件 实现: create proc exportCSV ( @i ...
- 导出csv文件示例
导出csv文件示例 csv文件默认以英文逗号,做为列分隔符换行符\n作为行分隔符,写入到一个.csv文件即可.含有英文逗号,和换行符会发生数据输出会出现混乱,下面列出一些处理方法.特殊字符处理1.含有 ...
- mysql SQLyog导入导出csv文件
1.选择数据库表 --> 右击属性 --> 备份/导出 --> 导出表数据作为 --> 选择cvs --> 选择下面的“更改” --> 字段 --> 变量长度 ...
- PHP 读取/导出 CSV文件
工作中经常会有遇到导入/导出的需求,下面是常用的方法.读取CSV文件,可以分页读取,设置读取行数,起始行数即可.导出CSV文件,用两种方法进行实现. /** * 读取CSV文件 * @param st ...
随机推荐
- wordpress 配置坑详解
首先 经过我测试,php74模块没有支持apache的.所以升级到php74 之后,php无法使用. 最基本的函数phpinfo 调用不出来,没有相关的模块. 安装mariadb 10.4 之后发现, ...
- springBoot进阶02
SpringBoot进阶02 1. 日志的使用 1.1 基本使用 /** * 获取日志记录器 */ Logger logger = LoggerFactory.getLogger(this.getCl ...
- Git操作：绑定上传已存在的仓库到Github
之前使用github都是创建一个全新的仓库,然后clone下来用,但如果我已经有一个正在使用的仓库,想要绑定上传已存在的仓库到github,怎么做呢?其实在github创建仓库的时候会提示: …or ...
- ThreadPool(线程池)介绍
>>返回<C# 并发编程> 1. 线程池的由来 1.1. 线程池出现前 1.2. 线程池的诞生 1.3. CLR线程池工作过程 2. 线程池解决的问题 2.1. 异步调用方法 ...
- MongoDB高可用架构集群管理(一)
MongoDB数据库核心的两个特点:第一个特点是副本集的自动切换,保证数据的高可靠.服务的高可用:第二个特点是自动分片.服务的横向扩展能力. (一)副本集架构 MongoDB的副本集是一组保持相同数据 ...
- Travase Objects and four method of array
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 为实践javaweb项目，搭建了相应环境
为实践javaweb项目,搭建了相应环境,现总结一下. JDK与JRE的安装与配置 前提准备: 1.我们下载的JDK安装包里面既包含JDK又包含JRE: 2.要确认你的电脑里面没有JDK和JRE的残留 ...
- 如何将旧Mac的数据迁移到新的MacBook Pro？
最新版的MacBook Pro已经上市,具有超凡魅力的Touch Bar开创了一个新时代.苗条的设计和华丽的显示效果也起到了推动运动的作用……!将数据从旧Mac传输到新Mac不再是一件漫长的事.您只需 ...
- CSS3之border-image的使用
最近,我在项目开发中遇到这样的问题. 要给这个tab的底部的蓝线左右加上圆角. 然而,这个元素实际如上图所示,只是active的时候加了个underline的类,蓝线并没有单独的html. 若给这个s ...
- JavaWeb开发图书管理系统（新本版）源码
开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MySQL数据库 运行效果图