转自: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文件
原文地址:http://www.cnblogs.com/YangtzeYu/p/7773784.html