工作中,导出数据到表格的功能很多吧,
以下是我 导出数据到Excel表格 的方法:
一 .首先需要引用JS脚本: 直接复制全部脚本, 写到一个js文件里面,引用就行了
1 /* eslint-disable */ 2 let idTmr; 3 const getExplorer = () => { 4 let explorer = window.navigator.userAgent; 5 //ie 6 if (explorer.indexOf("MSIE") >= 0) { 7 return 'ie'; 8 } 9 //firefox 10 11 else if (explorer.indexOf("Firefox") >= 0) { 12 return 'Firefox'; 13 } 14 //Chrome 15 else if (explorer.indexOf("Chrome") >= 0) { 16 return 'Chrome'; 17 } 18 //Opera 19 else if (explorer.indexOf("Opera") >= 0) { 20 return 'Opera'; 21 } 22 //Safari 23 else if (explorer.indexOf("Safari") >= 0) { 24 return 'Safari'; 25 } 26 } 27 // 判断浏览器是否为IE 28 const exportToExcel = (data, name) => { 29 30 // 判断是否为IE 31 if (getExplorer() == 'ie') { 32 tableToIE(data, name) 33 } else { 34 tableToNotIE(data, name) 35 } 36 } 37 38 const Cleanup = () => { 39 window.clearInterval(idTmr); 40 } 41 42 // ie浏览器下执行 43 const tableToIE = (data, name) => { 44 let curTbl = data; 45 let oXL = new ActiveXObject("Excel.Application"); 46 47 //创建AX对象excel 48 let oWB = oXL.Workbooks.Add(); 49 //获取workbook对象 50 let xlsheet = oWB.Worksheets(1); 51 //激活当前sheet 52 let sel = document.body.createTextRange(); 53 sel.moveToElementText(curTbl); 54 //把表格中的内容移到TextRange中 55 sel.select; 56 //全选TextRange中内容 57 sel.execCommand("Copy"); 58 //复制TextRange中内容 59 xlsheet.Paste(); 60 //粘贴到活动的EXCEL中 61 62 oXL.Visible = true; 63 //设置excel可见属性 64 65 try { 66 let fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); 67 } catch (e) { 68 print("Nested catch caught " + e); 69 } finally { 70 oWB.SaveAs(fname); 71 72 oWB.Close(savechanges = false); 73 //xls.visible = false; 74 oXL.Quit(); 75 oXL = null; 76 // 结束excel进程,退出完成 77 window.setInterval("Cleanup();", 1); 78 idTmr = window.setInterval("Cleanup();", 1); 79 } 80 } 81 82 // 非ie浏览器下执行 83 const tableToNotIE = (function () { 84 // 编码要用utf-8不然默认gbk会出现中文乱码 85 let uri = 'data:application/vnd.ms-excel;base64,', 86 template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', 87 base64 = function (s) { 88 return window.btoa(unescape(encodeURIComponent(s))); 89 90 }, 91 92 format = (s, c) => { 93 return s.replace(/{(\w+)}/g, 94 (m, p) => { 95 return c[p]; 96 }) 97 } 98 return (table, name) => { 99 let ctx = { 100 worksheet: name, 101 table 102 } 103 104 //创建下载 105 let link = document.createElement('a'); 106 link.setAttribute('href', uri + base64(format(template, ctx))); 107 108 link.setAttribute('download', name); 109 110 111 // window.location.href = uri + base64(format(template, ctx)) 112 link.click(); 113 } 114 })() 115 116 // 导出函数 117 const export2Excel = (theadData, tbodyData, dataname) => { 118 119 let re = /http/ // 字符串中包含http,则默认为图片地址 120 let th_len = theadData.length // 表头的长度 121 let tb_len = tbodyData.length // 记录条数 122 let width = 200// 设置图片大小 123 let height = 100 124 125 // 添加表头信息 126 let thead = '<thead><tr>' 127 for (let i = 0; i < th_len; i++) { 128 thead += '<th>' + theadData[i] + '</th>' 129 } 130 thead += '</tr></thead>' 131 132 // 添加每一行数据 133 let tbody = '<tbody>' 134 for (let i = 0; i < tb_len; i++) { 135 tbody += '<tr>' 136 let row = tbodyData[i] // 获取每一行数据 137 138 //有图片的话 ,就把下面的if打开 139 for (let key in row) { 140 //if (re.test(row[key])) { // 如果为图片,则需要加div包住图片 141 // // 142 // tbody += '<td style="width:' + width + 'px; height:' + height + 'px; text-align: center; vertical-align: middle"><div style="display:inline"><img src=\'' + row[key] + '\' ' + ' ' + 'width=' + '\"' + width + '\"' + ' ' + 'height=' + '\"' + height + '\"' + '></div></td>' 143 //} else { 144 tbody += '<td style="text-align:center">' + row[key] + '</td>' 145 //} 146 } 147 148 tbody += '</tr>' 149 } 150 tbody += '</tbody>' 151 152 let table = thead + tbody 153 154 // 导出表格 155 exportToExcel(table, "C:\Users\Mloong\Desktop") 156 }
二 . js代码: post请求一个ExproExcel的方法,返回的是要导出的数据。
ret返回的数据格式为 数组的对象, tHeader是Excel表格的头部,
1 $.post('ExprotExcel', null, function (ret) { 2 3 let tHeader = [ 4 '申请编号', 5 '体现人', 6 '缴税金额', 7 '金额', 8 '总金额', 9 '审核状态', 10 '提现方式', 11 '创建时间', 12 ] 13 let tbody = ret; //Excel表数据,json返回,为数组对象的结构 14 export2Excel(tHeader, tbody); 15 });
PS: ret 返回的格式是这样的:
1 let tbody = [ 2 { 3 name: '玫瑰花', 4 color: '红色', 5 pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2801998497,4036145562&fm=27&gp=0.jpg' 6 }, 7 { 8 name: '菊花', 9 color: '黄色', 10 pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1506844670,1837003941&fm=200&gp=0.jpg' 11 }, 12 { 13 name: '牵牛花', 14 color: '紫色', 15 pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3056120770,1115785765&fm=27&gp=0.jpg' 16 }, 17 { 18 name: '梅花', 19 color: '白色', 20 pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2700343322,3431874915&fm=27&gp=0.jpg' 21 }, 22 { 23 name: '桃花花', 24 color: '粉色', 25 pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=602076004,4209938077&fm=27&gp=0.jpg' 26 } 27 ] 28 --------------------- 29 作者:little小 30 来源:CSDN 31 原文:https://blog.csdn.net/xiaoxiaojie12321/article/details/81780900 32 版权声明:本文为博主原创文章,转载请附上博文链接!
三: 这种格式的数据 ,那么我就可以直接到后台返回了:
就是 List集合类型的对象 ,ToArray 一下就行了
1 public ActionResult ExprotExcel() 2 { 3 var lists = (from a in es_EGDSuperRecordService.Instance.LoadEntities() 4 join b in es_AgentsService.Instance.LoadEntities() on a.sendid equals b.AgentsID 5 orderby a.createtime descending 6 select new 7 { 8 9 id = a.id, 10 AgentsName = b.AgentsName, 11 feenumber = a.feenumber, 12 number = a.number, 13 allnumber = a.allnumber, 14 flag = a.flag == 0 ? "待审核" : a.flag==1?"审核通过":"审核不通过", 15 sendaddress = a.sendaddress, 16 createtime = a.createtime, 17 }).ToList(); 18 19 return Json(lists.ToArray(),JsonRequestBehavior.AllowGet); 20 }
脚本包里面的 一些东西,看得懂 是可以直接改的。