s-HR通过js导出excel方式一
近期有个需求需要将表格的数据导出到excel，发现了一种比较简单的方式，可以直接通过js实现，也可以结合后端逻辑处理数据，话不多说，先上demo。
1 <html> 2 <head> 3 <button onclick='exportToExcel()'>js导出excel</button> 4 </head> 5 <body> 6 <script> 7 const exportToExcel= () => { 8 9 // 列标题，逗号隔开，每一个逗号就是隔开一个单元格 10 var str = "序号,姓名,金额\n"; 11 // 表格数据 12 // 增加\t为了不让表格显示科学计数法或者其他格式 13 str = str + "1\t,zhangsan\t,100\t,\n" 14 15 // encodeURIComponent解决中文乱码 16 const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); 17 // 通过创建a标签实现 18 const link = document.createElement("a"); 19 link.href = uri; 20 // 对下载的文件命名 21 link.download = "导出数据.csv"; 22 link.click(); 23 } 24 </script> 25 </body> 26 </html>
这种方式最重要的就是拼导出数据的字符串（demo中的str），在表格数据存在对象时，也可以调用后台代码，在后代码处理数据字符串，如：
1 /** 2 * 描述: 全部导出excel 3 * @action 4 */ 5 exportToExcelAction: function(){ 6 var _self = this; 7 var $grid = $("#entrys"); 8 9 //获取单据id，去后台查询数据 10 var id = $("#id").val(); 11 //通过colModel获取表格模型 12 var colModel = $grid.jqGrid('getGridParam', 'colModel'); 13 //列属性name 14 var str = colModel[0].name; 15 var colNames = "序号"; 16 for(var i=1;i<colModel.length;i++){ 17 if("id"!=colModel[i].label){ 18 colNames = colNames+","+colModel[i].label; 19 str = str+","+colModel[i].name; 20 } 21 } 22 //列名别名 23 var jsondata = colNames + '\n'; 24 //调用后台代码，将id及要查询的属性传递到后台 25 _self.remoteCall({ 26 type:"post", 27 method:"exportToExcel", 28 param:{ 29 columnModel:str, 30 datas:id 31 }, 32 async: false, 33 success:function(res){ 34 //拿到后台处理好的数据 35 jsondata = jsondata+res.data; 36 const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(jsondata); 37 // 通过创建a标签实现 38 const link = document.createElement("a"); 39 link.href = uri; 40 // 对下载的文件命名 41 link.download = "数据表.xlsx"; 42 link.click(); 43 } 44 45 }); 46 }
