zoukankan      html  css  js  c++  java
  • 前端实现table表格导出excel

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .tb-head{
                background-color: #ccc;
            }
        </style>
    <head>
    <script type="text/javascript" language="javascript">
        //处理除了行内样式以外的css样式,导出excel时只能读取到行内样式,要讲非行内样式转化成行内样式 window.onload = function(){ var tbhead = document.getElementsByClassName("tb-head"); var computedStyle = document.defaultView.getComputedStyle(tbhead[0], null); console.log(computedStyle.backgroundColor); tbhead[0].style.backgroundColor = computedStyle.backgroundColor; } var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //firefox else if (explorer.indexOf("Firefox") >= 0) { return 'Firefox'; } //Chrome else if(explorer.indexOf("Chrome") >= 0){ return 'Chrome'; } //Opera else if(explorer.indexOf("Opera") >= 0){ return 'Opera'; } //Safari else if(explorer.indexOf("Safari") >= 0){ return 'Safari'; } } function method1(tableid) {//整个表格拷贝到EXCEL中 if(getExplorer()=='ie') { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel var oWB = oXL.Workbooks.Add(); //获取workbook对象 var xlsheet = oWB.Worksheets(1); //激活当前sheet var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中 sel.select; //全选TextRange中内容 sel.execCommand("Copy"); //复制TextRange中内容 xlsheet.Paste(); //粘贴到活动的EXCEL中 oXL.Visible = true; //设置excel可见属性 try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); //xls.visible = false; oXL.Quit(); oXL = null; //结束excel进程,退出完成 //window.setInterval("Cleanup();",1); idTmr = window.setInterval("Cleanup();", 1); } } else { tableToExcel(tableid) } } function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); } var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', 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]--></head><body><table>{table}</table></body></html>', base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(w+)}/g, function(m, p) { return c[p]; }) }; return function(table, name) { debugger; if (!table.nodeType) table = document.getElementById(table); var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; window.location.href = uri + base64(format(template, ctx)); } })() </script> </head> <body> <!-- <table id="ta"> <tr> <td>1</td><td>admin</td> <td>23</td><td>程序员</td> <td>天津</td><td>admin@kali.com</td> </tr> <tr> <td>2</td><td>guest</td> <td>23</td><td>测试员</td> <td>北京</td><td>guest@kali.com</td> </tr> </table> --> <table id="tb" border=4 width=250 align=center> <caption>【表格举例】</caption> <tr class="tb-head"> <th><br></th> <th>列-A</th> <th>列-B</th> <th>列-C</th> </tr> <tr align=center> <td>行-1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr> <tr align=center> <td>行-2</td> <td>A2</td> <td>B2</td> </tr> <tr align=center> <td>行-3</td> <td>A3</td> <td colspan=2>A3-B3</td> </tr> </table> <input id="Button1" type="button" value="导出EXCEL" onclick="method1('tb')" /> </body> </html>

      

  • 相关阅读:
    9.1 一周学习总结
    EasyUI(添加购物车小demo)
    助你了解react的小demo
    PHP(一)OOP基础
    继承的三种方式
    jQuery基础应用
    刘强1109 JavaScript基础二(分支与循环结构)
    JavaScript基础一(js基础函数与运算符)
    移动开发与响应式
    css基础语法三
  • 原文地址:https://www.cnblogs.com/wxiaona/p/6677456.html
Copyright © 2011-2022 走看看