JavaScript将页面表格数据导出为Excel、CSV格式文件(结合JQuery EasyUI的grid )
2017-09-06 20:42
946 查看
[align=center]JavaScript实现JQuery EasyUI的grid数据导出excel摸索纠结一下午了。[/align]
[align=center]
[/align]
1、IE浏览器实现 ,感觉很鸡肋,不兼容 ,需要设置太多浏览器ActiveX 配置环境麻烦。
关键字: var oXL = new ActiveXObject("Excel.Application");
2、浏览器完全不兼容谷歌、火狐、遨游,蛋蛋的edge都不支持。
Uncaught ReferenceError: ActiveXObject is not defined
3、借助百度神奇的力量,找到实现的核心代码。完美实现了,,谷歌,火狐,360,IE,遨游等浏览器。
[align=center]
[/align]
1、IE浏览器实现 ,感觉很鸡肋,不兼容 ,需要设置太多浏览器ActiveX 配置环境麻烦。
关键字: var oXL = new ActiveXObject("Excel.Application");
<!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>
2、浏览器完全不兼容谷歌、火狐、遨游,蛋蛋的edge都不支持。
Uncaught ReferenceError: ActiveXObject is not defined
3、借助百度神奇的力量,找到实现的核心代码。完美实现了,,谷歌,火狐,360,IE,遨游等浏览器。
function Prints() { //获取grid 数据 var data = JSON.stringify($('#datagrid').datagrid('getData').rows); //alert(data); if (data == '') return; outCsv(data, "请假汇总", true); } function outCsv(JSONData, ReportTitle, ShowLabel) { var CSV = ''; /* Set Report title in first row or line 在第一集的行或行报告title */ CSV += ReportTitle + '\r\n\n'; /* If JSONData is not an object then JSON.parse will parse the JSON string in an Object 如果JSONData不是一个对象然后JSON.parse将解析对象中的JSON字符串 */ var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; /* This condition will generate the Label/Header 这将产生的header label */ if (ShowLabel) { var row = ""; /* This loop will extract the label from 1st index of on array 这个循环将从数组的第一个索引中提取标签。 */ for (var index in arrData[0]) { /* Now convert each value to string and comma-seprated 现在将每个值的字符串,用逗号分开 根据实际情况重新赋值 */ if (index == "MM") { index = "统计月份"; } if (index == "TOTAL") { index = "请假次数"; } row += index + ','; } //截取对象内的数据。 row = row.slice(0, -1); /* append Label row with line breakappend Label row with line break 附加带换行符的标签行 */ CSV += row + '\r\n'; } //1st loop is to extract each row 开始遍历取数据 for (var i = 0; i < arrData.length; i++) { var row = ""; /* 2nd loop will extract each column and convert it in string comma-seprated 第二环路将提取每一列并将其转换成字符串逗号分开 */ for (var index in arrData[i]) { row += '"' + arrData[i][index] + '",'; } row.slice(0, row.length - 1); //add a line break after each row CSV += row + '\r\n'; } if (CSV == '') { alert("Invalid data"); return; } // Generate a file name 定义一个文件名一个文件名 var fileName = ""; //this will remove the blank-spaces from the title and replace it with an underscore fileName += ReportTitle.replace(/ /g, "_"); // if browser is IE if (window.navigator.msSaveOrOpenBlob) { var csvContent = "\ufeff"; var uriie = csvContent + CSV; var blob = new Blob([decodeURIComponent(encodeURI(uriie))], { type: "data:text/csv;charset=utf-8," }); navigator.msSaveBlob(blob, fileName + '.csv'); } else { var csvContent = "data:text/csv;charset=utf-8,\ufeff"; var uriother = csvContent + CSV; // 第一种实现 var encodedUri = encodeURI(uriother); var link = document.createElement("a"); link.setAttribute("href", encodedUri); 4000 link.setAttribute("download", fileName + ".csv"); document.body.appendChild(link); link.click(); //var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURI(CSV); //// Now the little tricky part. //// you can use either>> window.open(uri); //// but this will not work in some browsers //// or you will not get the correct file extension //// this trick will generate a temp <a /> tag 此技巧将生成一个临时标记 //var link = document.createElement("a"); //link.href = uri; //// set the visibility hidden so it will not effect on your web-layout //// 设置可见性,这样它不会影响你的网页布局。 //link.style = "visibility:hidden"; //link.download = fileName + ".csv"; //// this part will append the anchor tag and remove it after automatic click //// 此部分将追加锚标记并在自动单击后删除它。 //document.body.appendChild(link); //link.click(); //document.body.removeChild(link); } }
相关文章推荐
- 网页端中将表格数据和JSON数据读取(导出)到本地的excel和csv文件中
- 页面数据导出CSV格式文件
- javascript调用activeXObject 导出页面表格数据到excel
- EXCEL VBA中写了个宏把本EXCEL中的表数据批量导出为csv格式的文件
- net控件中数据导到Excel的格式 首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取它,所以把mime类型设为:application/vnd.ms-excel,当excel读取文件时会以每个cell的格式呈现数据,如果cell没有规定的格式,则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间,当然我们必须使用excel支持的格式。下面就列出常用的一些格式: 1) 文本
- Trac - 常见问题 - 导出的csv格式文件在Excel中处理unix时间戳
- 将GRID中数据导出到 EXCEL文件中
- Web页面的数据导出excel时的格式问题
- Web页面的数据导出excel时的格式问题(转)
- JAVASCRIPT将网页表格导出EXCEL或WORD文件
- JavaScript Web页面表格导出到Word、Excel
- [转]asp.net导出Excel/Csv格式数据最优方案(C#)
- [转]asp.net导出Excel/Csv格式数据最优方案(C#)
- Web页面的数据导出excel时的格式问题 【转】
- 将数据从DataGridView中导出成CSV格式文件
- bcp怎么导出一个表数据为带列名的csv格式文件
- asp.net导出Excel/Csv格式数据方案
- Web页面的数据导出excel时的格式问题
- asp.net导出Excel/Csv格式数据最优方案(C#)
- javascript 将页面上的Table导出保存为Excel (无格式)