通过自己实际测试有以下几种方法

方法一通过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>

网页前端导出CSV,Excel格式文件的更多相关文章

  1. 将Mysql的一张表导出至Excel格式文件

    将Mysql的一张表导出至Excel格式文件 导出语句 进入mysql数据库,输入如下sql语句: select id, name, age from tablename into outfile ' ...

  2. 将table导出为excel格式文件

    html: <table cellpadding="0" cellspacing="0" class="data_table" id= ...

  3. Powerdesigner 导出Excel格式数据字典 导出Excel格式文件

    版权声明:本文为博主原创文章,转载请注明出处; 网上我也看到了很多的Powerdesigner 导出方法,因为Powerdesigner 提供了部分VBA功能,所以让我用代码导出Excel格式文件得以 ...

  4. 使用PHPExcel导入导出excel格式文件

    使用PHPExcel导入导出excel格式文件  作者:zccst  因为导出使用较多,以下是导出实现过程.  第一步,将PHPExcel的源码拷贝到项目的lib下  文件包含:PHPExcel.ph ...

  5. 将ACCESS 的数据库中的表的文件 导出了EXCEL格式

    将ACCESS 的数据库中的表的文件 导出了EXCEL格式 '''' '将ACCESS数据库中的某个表的信息 导出为EXCEL 文件格式 'srcfName ACCESS 数据库文件路径 'desfN ...

  6. 前端导出csv

    前端导出csv export: function(data, name) { // csv文件的BOM头 \ufeff可以让excel等识别出csv文件的编码 var uri = 'data:text ...

  7. SPOOL 命令使用实例【oracle导出纯文本格式文件】

    SPOOL 命令使用实例[oracle导出纯文本格式文件] SET echo off              --在用start命令执行一个sql脚本时,是否显示脚本中正在执行的SQL语句: SET ...

  8. java导入导出下载Excel,xls文件(带下拉框)

    /** * 导入excel文件 * 2014-7-23 * @return */ @RequiresPermissions("plug:product:caiwu:upload") ...

  9. python读取与写入csv,txt格式文件

    python读取与写入csv,txt格式文件 在数据分析中经常需要从csv格式的文件中存取数据以及将数据写书到csv文件中.将csv文件中的数据直接读取为dict类型和DataFrame是非常方便也很 ...

随机推荐

  1. 虚拟机(linux)怎么上网

    问题描述:本机并没有显示虚拟机(linux)的虚拟网卡,那能不能用虚拟机上网呢,如果要让本机显示出虚拟机的虚拟网卡会有一万步各种安装卸载,那么,在现有条件下可不可以上网呢,答案是可以的. 解决方案: ...

  2. C++ 与String有关的函数!!!

    String函数 1.字符串的输入 (1) string s; cin >> s;//碰到空格等分隔符会终端输入 /* string s; cin >> s;//如果输入 he ...

  3. P1525 关押罪犯【二分+二分图】

    输入输出样例 输入 #1 复制 4 6 1 4 2534 2 3 3512 1 2 28351 1 3 6618 2 4 1805 3 4 12884 思路 对于要求最大值最小的问题,不难想到二分. ...

  4. sudo的简单用法

    su: Switch User, 以管理员身份运行某些命令: su -l root -c 'COMMAND' 但是想要限制某个用户只拥有一部分管理员权限,而不是拥有全部权限,这就需要用到sudo su ...

  5. JS:JS判断提交表单不能为空等验证

    这段代码在<form>中有οnsubmit="return on_submit()",如果 onsubmit ()返回 fasle,表单的元素就不会提交,即action ...

  6. 注解配置springMVC

    在随笔“springMVC项目配置文件”的基础上,进行优化,使用注解配置,控制器类得以简化: 一.注解配置springMVC 1.在HelloController类中,去除实现的Controller接 ...

  7. Linux 常用命令 服务器间scp 用户 export 创建文件、软连接

    获取外网ip curl icanhazip.com 服务器间的 文件 复制 scp root@ip:/源目录 目标目录 软连接 查看软连接 ls -li 创建软连接 ln -s 源文件 目标文件 -s ...

  8. H5_0019:JS中定义json结构

            "7HKm": function(e, a, d) {             "use strict";             Object ...

  9. javascripts的this

    前言 javascript 的 this 指向主要是依赖上下文对象决定,箭头函数例外. 默认绑定 在全局作用域下调用函数,函数的this默认指向window. 注意1:严格模式下,默认指向undefi ...

  10. poj1141题解

    题意 空序列是规则序列:用小括号(或者方括号)把一个规则序列括起来依然是规则序列:两个规则序列并列在一起仍然是规则序列. 给出一个括号字符串S,求一个规则序列ANS,满足S是ANS的子序列且ans尽可 ...