【转载】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 ...
随机推荐
- numpy 消除Futurewarning
numpy版本过高 1.查看numpy版本 import numpy as np np.__version__ 2.卸载numpy sudo pip3 uninstall numpy 3.安装较低版本 ...
- mysql 查询出现 "this is incompatible with sql_mode=only_full_group_by"错误解决方案，以及个人rpm方式重装所遇到的问题备份
一.错误说明 这个错误发生在mysql 5.7 版本及以上版本会出现的问题: mysql .7版本默认的sql配置是:sql_mode="ONLY_FULL_GR ...
- MySQL基础（5） | 存储过程
MySQL基础(5) | 存储过程 一.基础 结束符[重要] mysql的命令行执行每一条命令是以分号结尾的,也就是说识别是否为一条命令,是根据分号决定的. 然而存储过程中设计多条语句,很可能出现多个 ...
- 从表单驱动到模型驱动，解读低代码开发平台的发展趋势 ZT
原文地址:https://www.grapecity.com.cn/blogs/read-the-trends-of-low-code-development-platforms 随着社会数字化进程的 ...
- Java遍历字符串数组的几种方法
1. for循环 for(int i = 0; i < fields[].length; i++){ } 2 for each循环 for(String x:fields){ } 3. JDK8 ...
- 环绕通知(xml)
1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- Lodash是什么？
lodash:是一个一致性.模块化.高性能的 JavaScript 实用工具库.(也就是相当于自己封装的私有方法) node里引入 // Load the full build. var _ = re ...
- Uva1660 (点联通度、边联通度问题)
题意: 给定一个n(n<=50)的无向图,问最小删去几个点,可以使得这个图不连通 解法: 1. 基本概念 (1)一个具有 N 个顶点的图,在去掉任意 K-1 个顶点后 (1<=K&l ...
- Codeforces Round #622（Div 2）C2. Skyscrapers (hard version)
题目链接 : C2. Skyscrapers (hard version) 题目描述 : 与上一道题类似,只是数据范围变大, 5e5, 如果用我们原来的方法,铁定是超时的. 考察点 : 单调栈,贪心, ...
- Mybatis的增删改和log4j的基础配置
带条件查询 mapper文件的内容: <select id="getSelectElectron" resultType="electron"> s ...