Monday, April 30, 2018

html table to excel js

<!-- using plugin with image -->
<!DOCTYPE html>
<html>
<head>
<title>jQuery Boilerplate</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.table2excel.js"></script> <!-- https://github.com/rainabba/jquery-table2excel -->
</head>
<body>
<table class="table2excel" data-tableName="Test Table 1">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
</thead>
<tbody>
<tr>
<td>data1a with a <a href="#">link one</a> and <a href="#">link two</a>.</td>
<td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
<tr>
<td>data2a with a <input tyle="text" value="text value">.</td>
<td>data2b with a <input tyle="text" value="second text value">.</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>

<table class="table2excel" data-tableName="Test Table 2">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
</thead>
<tbody>
<tr><td>data1a</td><td>data1b</td></tr>
<tr><td>data2a</td><td>data2b</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>

<script>
$(function() {
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
});
</script>
</body>
</html>

// using js
<!DOCTYPE html>
<html>
<head>
    <title>html table to excel</title>

    <script type="text/javascript">
        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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                window.location.href = uri + base64(format(template, ctx))
            }
        })()
    </script>
    <style>
        table {
            empty-cells: show;
            border: 1px solid #000;
        }

        table td,
        table th {
            min-width: 2em;
            min-height: 2em;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">

<table  id="testTable">
    <tr>
        <td>
            Table heading
        </td>
    </tr>
    <tr>
        <td>
                <table>
        <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1a</td>
            <td>2a</td>
            <td>3a</td>
            <td>a4</td>
        </tr>
        </tbody>
    </table>
        </td>
    </tr>
    <tr>
        <td>
                <table>
        <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>a</td>
            <td>1a</td>
            <td>2a</td>
            <td>3a</td>
            <td>a4</td>
        </tr>
        </tbody>
    </table>
        </td>
    </tr>
</table>

    </body>
</html>



// form data to excel
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">

            $('input:radio').live('change', function(){
        var sstrSect = ($(this).attr('name').substr([3]));
    var comFldId = ("C" + sstrSect);
        if ($(this).val() == "NOK"){
            document.getElementById(comFldId).style.display = '';
        } else {
            document.getElementById(comFldId).style.display = 'none';
        }
    });

    $('input[type="radio"]:checked').each(function() {
        var sstrSect = ($(this).attr('name').substr([3]));
        var comFldId = ("C" + sstrSect);
            if ($(this).val() == "NOK"){
                document.getElementById(comFldId).style.display = '';
            } else {
                document.getElementById(comFldId).style.display = 'none';
            }
        });


function toExcel() {

    if ("ActiveXObject" in window) {
        alert("This is Internet Explorer!");
    } else {

        var cache = {};
        this.tmpl = function tmpl(str, data) {
            var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
            new Function("obj",
                         "var p=[],print=function(){p.push.apply(p,arguments);};" +
                         "with(obj){p.push('" +
                         str.replace(/[\r\t\n]/g, " ")
                         .split("{{").join("\t")
                         .replace(/((^|}})[^\t]*)'/g, "$1\r")
                         .replace(/\t=(.*?)}}/g, "',$1,'")
                         .split("\t").join("');")
                         .split("}}").join("p.push('")
                         .split("\r").join("\\'") + "');}return p.join('');");
            return data ? fn(data) : fn;
        };
        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>{{for(var i=0; i<tables.length;i++){ }}<table>{{=tables[i]}}</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 (tableList, name) {
                if (!tableList.length > 0 && !tableList[0].nodeType) table = document.getElementById(table);
                var tables = [];
                for (var i = 0; i < tableList.length; i++) {
                    tables.push(tableList[i].innerHTML);
                }
                var ctx = {
                    worksheet: name || 'Worksheet',
                    tables: tables
                };
                window.location.href = uri + base64(tmpl(template, ctx));
            };
        })();
        //tableToExcel(document.getElementsByTagName("table"), "one");
        tableToExcel(document.getElementsByClassName("testTable"), "one");
    }
}
    </script>
</head>
<body>
<input id="ExporttoExcel" class="show" type="button" onclick="toExcel()" value="Export to Excel">
<table class="testTable">
    <thead>
    <tr>
        <th rowspan="2"></th>
        <th colspan="4">&nbsp;</th>
    </tr>
    <tr>
        <th>I</th>
        <th>II</th>
        <th>III</th>
        <th>IIII</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="5">
            <table>
                <thead>
                <tr>
                    <th rowspan="2"></th>
                    <th colspan="4">&nbsp;</th>
                </tr>
                <tr>
                    <th>I</th>
                    <th>II</th>
                    <th>III</th>
                    <th>IIII</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>1a</td>
                    <td>2a</td>
                    <td>3a</td>
                    <td>a4</td>
                </tr>
                </tbody>

            </table>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <table>
                <thead>
                <tr>
                    <th rowspan="2"></th>
                    <th colspan="4">&nbsp;</th>
                </tr>
                <tr>
                    <th>I</th>
                    <th>II</th>
                    <th>III</th>
                    <th>IIII</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>1a</td>
                    <td>2a</td>
                    <td>3a</td>
                    <td>a4</td>
                </tr>
                </tbody>

            </table>
        </td>
    </tr>
    </tbody>
</table>

</body>
</html>


// multiple sheets

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/plain; charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Admin Panel</title>
<script type="text/javascript" >
  var tablesToExcel = (function() {
   var uri = 'data:application/vnd.ms-excel;base64,'
   , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
     + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
     + '<Styles>'
     + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
     + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
     + '</Styles>'
     + '{worksheets}</Workbook>'
   , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
   , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
   , 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(tables, wsnames, wbname, appname) {
     var ctx = "";
     var workbookXML = "";
     var worksheetsXML = "";
     var rowsXML = "";
     for (var i = 0; i < tables.length; i++) {
       if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
       for (var j = 0; j < tables[i].rows.length; j++) {
         rowsXML += '<Row>'
         for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
           var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
           var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
           var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
           dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
           var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
           dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
           ctx = {  attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
                  , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
                  , data: (dataFormula)?'':dataValue
                  , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
                 };
           rowsXML += format(tmplCellXML, ctx);
         }
         rowsXML += '</Row>'
       }
       ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
       worksheetsXML += format(tmplWorksheetXML, ctx);
       rowsXML = "";
     }
     ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
     workbookXML = format(tmplWorkbookXML, ctx);
     var link = document.createElement("A");
     link.href = uri + base64(workbookXML);
     link.download = wbname || 'Workbook.xls';
     link.target = '_blank';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   }
 })();
</script>
</head>
<body>
<table id="tbl1" class="table2excel">
        <tr>
            <td>Product</td>
            <td>Price</td>
            <td>Available</td>
            <td>Count</td>
        </tr>
        <tr>
            <td>Bred</td>
            <td>1</td>
            <td>2</td>
             <td>3</td>
        </tr>
        <tr>
            <td>Butter</td>
            <td>4   </td>
            <td>5   </td>
            <td >6  </td>
        </tr>
  </table>
<hr>
  <table id="tbl2" class="table2excel">
        <tr>
            <td>Product</td>
            <td>Price</td>
            <td>Available</td>
            <td>Count</td>
        </tr>
        <tr>
            <td>Bred</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Butter</td>
            <td>14</td>
            <td>15</td>
            <td >16</td>
        </tr>
    </table>
<button  onclick="tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')">Export to Excel</button>
</body>
</html>
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)