1
0

export.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>线上巡店数据导出预览</title>
  8. <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
  9. <style>
  10. #loading {
  11. width: 100%;
  12. height: 100%;
  13. background-color: #cdcdcd;
  14. z-index: 99999;
  15. position: fixed;
  16. top: 0px;
  17. opacity: 50%;
  18. text-align: center;
  19. padding-top: 300px;
  20. }
  21. #loading i {
  22. font-size: 50px;
  23. }
  24. table {
  25. display: block;
  26. overflow: auto;
  27. position: relative;
  28. border-collapse: collapse;
  29. }
  30. table thead tr th {
  31. text-align: center;
  32. white-space: nowrap;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div>
  38. <table class="layui-table table_box" id="data-table">
  39. <thead class="tableHeader">
  40. <tr>
  41. {volist name="header1" id="h1"}
  42. <th rowspan="{$h1.rowspan??1}" colspan="{$h1.colspan??1}" class="{$h1.class}">{$h1.title|raw}</th>
  43. {/volist}
  44. </tr>
  45. <tr>
  46. {volist name="header2" id="h2"}
  47. <th class="{$h2.class}">{$h2.title|raw}</th>
  48. {/volist}
  49. </tr>
  50. </thead>
  51. <tbody class="table_tbody">
  52. </tbody>
  53. </table>
  54. </div>
  55. <div id="loading">
  56. <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
  57. </div>
  58. <script src="/static/layuiadmin/layui/layui.js"></script>
  59. <script>
  60. //IE方法
  61. function getXlsFromTbl(inTblId, inWindow) {
  62. try {
  63. var allStr = "";
  64. var curStr = "";
  65. if (inTblId != null && inTblId != "" && inTblId != "null") {
  66. curStr = getTblData(inTblId, inWindow);
  67. }
  68. if (curStr != null) {
  69. allStr += curStr;
  70. }
  71. else {
  72. alert("你要导出的表不存在");
  73. return;
  74. }
  75. var fileName = getExcelFileName();
  76. doFileExport(fileName, allStr);
  77. }
  78. catch (e) {
  79. alert("导出发生异常:" + e.name + "->" + e.description + "!");
  80. }
  81. }
  82. function getTblData(inTbl, inWindow) {
  83. var rows = 0;
  84. var tblDocument = document;
  85. if (!!inWindow && inWindow != "") {
  86. if (!document.all(inWindow)) {
  87. return null;
  88. }
  89. else {
  90. tblDocument = eval(inWindow).document;
  91. }
  92. }
  93. var curTbl = tblDocument.getElementById(inTbl);
  94. var outStr = "";
  95. if (curTbl != null) {
  96. for (var j = 0; j < curTbl.rows.length; j++) {
  97. for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
  98. if (i == 0 && rows > 0) {
  99. outStr += " t";
  100. rows -= 1;
  101. }
  102. outStr += curTbl.rows[j].cells[i].innerText + "t";
  103. if (curTbl.rows[j].cells[i].colSpan > 1) {
  104. for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
  105. outStr += " t";
  106. }
  107. }
  108. if (i == 0) {
  109. if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
  110. rows = curTbl.rows[j].cells[i].rowSpan - 1;
  111. }
  112. }
  113. }
  114. outStr += "rn";
  115. }
  116. }
  117. else {
  118. outStr = null;
  119. alert(inTbl + "不存在 !");
  120. }
  121. return outStr;
  122. }
  123. function getExcelFileName() {
  124. var d = new Date();
  125. var curYear = d.getYear();
  126. var curMonth = "" + (d.getMonth() + 1);
  127. var curDate = "" + d.getDate();
  128. var curHour = "" + d.getHours();
  129. var curMinute = "" + d.getMinutes();
  130. var curSecond = "" + d.getSeconds();
  131. if (curMonth.length == 1) {
  132. curMonth = "0" + curMonth;
  133. }
  134. if (curDate.length == 1) {
  135. curDate = "0" + curDate;
  136. }
  137. if (curHour.length == 1) {
  138. curHour = "0" + curHour;
  139. }
  140. if (curMinute.length == 1) {
  141. curMinute = "0" + curMinute;
  142. }
  143. if (curSecond.length == 1) {
  144. curSecond = "0" + curSecond;
  145. }
  146. var fileName = "table" + "_" + curYear + curMonth + curDate + "_"
  147. + curHour + curMinute + curSecond + ".csv";
  148. return fileName;
  149. }
  150. function doFileExport(inName, inStr) {
  151. var xlsWin = null;
  152. if (!!document.all("glbHideFrm")) {
  153. xlsWin = glbHideFrm;
  154. }
  155. else {
  156. var width = 6;
  157. var height = 4;
  158. var openPara = "left=" + (window.screen.width / 2 - width / 2)
  159. + ",top=" + (window.screen.height / 2 - height / 2)
  160. + ",scrollbars=no,width=" + width + ",height=" + height;
  161. xlsWin = window.open("", "_blank", openPara);
  162. }
  163. xlsWin.document.write(inStr);
  164. xlsWin.document.close();
  165. xlsWin.document.execCommand('Saveas', true, inName);
  166. xlsWin.close();
  167. }
  168. //Chrome方法
  169. var idTmr;
  170. function getExplorer() {
  171. var explorer = window.navigator.userAgent;
  172. //ie
  173. if (explorer.indexOf("MSIE") >= 0) {
  174. return 'ie';
  175. }
  176. //firefox
  177. else if (explorer.indexOf("Firefox") >= 0) {
  178. return 'Firefox';
  179. }
  180. //Chrome
  181. else if (explorer.indexOf("Chrome") >= 0) {
  182. return 'Chrome';
  183. }
  184. //Opera
  185. else if (explorer.indexOf("Opera") >= 0) {
  186. return 'Opera';
  187. }
  188. //Safari
  189. else if (explorer.indexOf("Safari") >= 0) {
  190. return 'Safari';
  191. }
  192. }
  193. function method5(tableid) {
  194. if (getExplorer() == 'ie') {
  195. var curTbl = document.getElementById(tableid);
  196. var oXL = new ActiveXObject("Excel.Application");
  197. var oWB = oXL.Workbooks.Add();
  198. var xlsheet = oWB.Worksheets(1);
  199. var sel = document.body.createTextRange();
  200. sel.moveToElementText(curTbl);
  201. sel.select();
  202. sel.execCommand("Copy");
  203. xlsheet.Paste();
  204. oXL.Visible = true;
  205. try {
  206. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  207. } catch (e) {
  208. print("Nested catch caught " + e);
  209. } finally {
  210. oWB.SaveAs(fname);
  211. oWB.Close(savechanges = false);
  212. oXL.Quit();
  213. oXL = null;
  214. idTmr = window.setInterval("Cleanup();", 1);
  215. }
  216. }
  217. else {
  218. tableToExcel(tableid)
  219. }
  220. }
  221. function Cleanup() {
  222. window.clearInterval(idTmr);
  223. CollectGarbage();
  224. }
  225. var tableToExcel = (function () {
  226. var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
  227. var agent = navigator.userAgent.toLowerCase();
  228. var isMac=/macintosh|mac os x/i.test(navigator.userAgent);
  229. if(isMac){
  230. if(isChrome){
  231. var uri = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'
  232. }else{
  233. var uri = 'data:application/vnd.ms-excel;base64,'
  234. }
  235. }else{
  236. var uri = 'data:application/vnd.ms-excel;base64,'
  237. }
  238. 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><!--[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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>';
  239. base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) };
  240. format = function (s, c) {
  241. return s.replace(/{(\w+)}/g,
  242. function (m, p) { return c[p]; })
  243. }
  244. return function (table, name) {
  245. if (!table.nodeType) table = document.getElementById(table)
  246. var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
  247. window.location.href = uri + base64(format(template, ctx))
  248. }
  249. })()
  250. layui.config({
  251. base: '/static/layuiadmin/' //静态资源所在路径
  252. }).extend({
  253. index: 'lib/index' //主入口模块
  254. }).use(['form'], function () {
  255. var $ = layui.$;
  256. var row = eval('{$row|raw}');
  257. var getData = function (page, limit) {
  258. $.ajax({
  259. url: location.href,
  260. data: { page, limit },
  261. success: function (rs) {
  262. if (rs.code == 1) {
  263. layer.msg(res.msg);
  264. return;
  265. }
  266. rs.data.forEach(function (item) {
  267. let tr = document.createElement('tr');
  268. row.forEach(function (k) {
  269. let td = document.createElement('td');
  270. if (item[k]) {
  271. td.innerText = item[k];
  272. }
  273. tr.appendChild(td);
  274. })
  275. $('.table_tbody').append(tr);
  276. });
  277. if (page < rs.page) {
  278. page++;
  279. getData(page, limit);
  280. } else {
  281. $('#loading').hide();
  282. method5('data-table');
  283. }
  284. }
  285. });
  286. }
  287. getData(1, 100);
  288. });
  289. </script>
  290. </body>
  291. </html>