【转载】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>
复制代码

转载于:https://www.cnblogs.com/YangtzeYu/p/7773784.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值