jQuery Table2Excel.js CDN Example to Convert HTML5 Table to Excel (.XLSX) File in Browser and Download it as Attachment Using Javascript Full Project For Beginners

 

 

index.html

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Table To Excel (XSL) Converter Example</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.2.1/minty/bootstrap.min.css">
<style>
body { background-color: #fafafa; }
.container { margin: 150px auto; max-width: 640px; }
</style>
</head>

<body>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container">
  <h1>Table To Excel (XSL) Converter Example</h1>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <p><button class="btn btn-primary" onclick="$('table').tblToExcel();">Download</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="jquery.tableToExcel.js"></script>
</body>


</script>
</html>

 

 

jquery-tableToExcel.js

 

 

(function ($) {
        $.fn.tblToExcel = function () {
            var elm = true;
            if (this.length > 1) {
				$('body').append('<div id="tbl-tnv-back" style="position: fixed; z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);">' +
				'<div id="tbl-tnv-excel" style="background-color: #fefefe;margin: auto;' +
				'padding: 20px; ' +
                'overflow: auto;' +
				'border: 1px solid #888;' +
				'width: 80%;" >  </div>' +
				'</div>');
                elm = false;
            }
            $('#tbl-tnv-back').click(function () {
                $(this).remove();
                $('#tbl-tnv-anch').remove();
            });
            var tableToExcel = (function () {
                var i = 0;
                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"><meta charset="utf-8"/><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) {
                    if (!table.nodeType) table
                    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                    if (elm) {
                        window.location.href = uri + base64(format(template, ctx));
                    } else {
                        i++;
                        var xl = uri + base64(format(template, ctx));
                        $('#tbl-tnv-excel').append('<a id="tbl-tnv-anch" style="background-color: #4CAF50;border: none;\n' +
                            'color: white;' +
                            'padding: 15px 32px;' +
                            'text-align: center;' +
                            'text-decoration: none;' +
                            'display: inline-block; margin: 1px;' +
                            'font-size: 16px;" href='+xl+' download>Download Excel-'+i+' </a>');
                    }
                }
            })();

            return this.each(function () {
                tableToExcel(this, 'W3C Example Table');
            });
        }

    }(jQuery));

 

Leave a Reply