How to convert HTML table to Excel using javascript and php Code

-

Step 1 Write the following code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="Scripts/jquery.battatech.excelexport.js"></script>
</head>
<body>
    <div id="dv">
        <table id="tblExport" style="border: 1px solid black;">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style='background-color: red;'>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <button id="btnExport">Export</button>
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnExport").click(function () {
            $("#tblExport").battatech_excelexport({
                containerid: "tblExport"
               , datatype: 'table'
            });
        });
    });
</script>

Step 2 :Copy the following code in

/jquery.battatech.excelexport.js

/*
 * jQuery Client Side Excel Export Plugin Library
 * http://www.battatech.com/
 *
 * Copyright (c) 2013 Batta Tech Private Limited
 * Licensed under https://github.com/battatech/battatech_excelexport/blob/master/LICENSE.txt
 */

(function ($) {
    var $defaults = {
        containerid: null
        , datatype: 'table'
        , dataset: null
        , columns: null
        , returnUri: false
        , worksheetName: "My Worksheet"
        , encoding: "utf-8"
    };

    var $settings = $defaults;

    $.fn.battatech_excelexport = function (options) {
        $settings = $.extend({}, $defaults, options);

        var gridData = [];
        var excelData;

        return Initialize();

        function Initialize() {
            var type = $settings.datatype.toLowerCase();

            BuildDataStructure(type);

            switch (type) {
                case 'table':
                    excelData = Export(ConvertFromTable());
                    break;
                case 'json':
                    excelData = Export(ConvertDataStructureToTable());
                    break;
                case 'xml':
                    excelData = Export(ConvertDataStructureToTable());
                    break;
                case 'jqgrid':
                    excelData = Export(ConvertDataStructureToTable());
                    break;
            }

            if ($settings.returnUri) {
                return excelData;
            }
            else {
                window.open(excelData);
            }
        }

        function BuildDataStructure(type) {
            switch (type) {
                case 'table':
                    break;
                case 'json':
                    gridData = $settings.dataset;
                    break;
                case 'xml':
                    $($settings.dataset).find("row").each(function (key, value) {
                        var item = {};

                        if (this.attributes != null && this.attributes.length > 0) {
                            $(this.attributes).each(function () {
                                item[this.name] = this.value;
                            });

                            gridData.push(item);
                        }
                    });
                    break;
                case 'jqgrid':
                    $($settings.dataset).find("rows > row").each(function (key, value) {
                        var item = {};

                        if (this.children != null && this.children.length > 0) {
                            $(this.children).each(function () {
                                item[this.tagName] = $(this).text();
                            });

                            gridData.push(item);
                        }
                    });
                    break;
            }
        }

        function ConvertFromTable() {
            var result = $('<div>').append($('#' + $settings.containerid).clone()).html();
            return result;
        }

        function ConvertDataStructureToTable() {
            var result = "<table>";

            result += "<thead><tr>";
            $($settings.columns).each(function (key, value) {
                if (this.ishidden != true) {
                    result += "<th";
                    if (this.width != null) {
                        result += " style='width: " + this.width + "'";
                    }
                    result += ">";
                    result += this.headertext;
                    result += "</th>";
                }
            });
            result += "</tr></thead>";

            result += "<tbody>";
            $(gridData).each(function (key, value) {
                result += "<tr>";
                $($settings.columns).each(function (k, v) {
                    if (value.hasOwnProperty(this.datafield)) {
                        if (this.ishidden != true) {
                            result += "<td";
                            if (this.width != null) {
                                result += " style='width: " + this.width + "'";
                            }
                            result += ">";
                            result += value[this.datafield];
                            result += "</td>";
                        }
                    }
                });
                result += "</tr>";
            });
            result += "</tbody>";

            result += "</table>";
            return result;
        }

        function Export(htmltable) {
            var excelFile = "<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'>";
            excelFile += "<head>";
            excelFile += '<meta http-equiv="Content-type" content="text/html;charset=' + $defaults.encoding + '" />';
            excelFile += "<!--[if gte mso 9]>";
            excelFile += "<xml>";
            excelFile += "<x:ExcelWorkbook>";
            excelFile += "<x:ExcelWorksheets>";
            excelFile += "<x:ExcelWorksheet>";
            excelFile += "<x:Name>";
            excelFile += "{worksheet}";
            excelFile += "</x:Name>";
            excelFile += "<x:WorksheetOptions>";
            excelFile += "<x:DisplayGridlines/>";
            excelFile += "</x:WorksheetOptions>";
            excelFile += "</x:ExcelWorksheet>";
            excelFile += "</x:ExcelWorksheets>";
            excelFile += "</x:ExcelWorkbook>";
            excelFile += "</xml>";
            excelFile += "<![endif]-->";
            excelFile += "</head>";
            excelFile += "<body>";
            excelFile += htmltable.replace(/"/g, '\'');
            excelFile += "</body>";
            excelFile += "</html>";

            var uri = "data:application/vnd.ms-excel;base64,";
            var ctx = { worksheet: $settings.worksheetName, table: htmltable };

            return (uri + base64(format(excelFile, ctx)));
        }

        function base64(s) {
            return window.btoa(unescape(encodeURIComponent(s)));
        }

        function format(s, c) {
            return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
        }
    };
})(jQuery);



Also require jquery.js .pls refer bootstrap files 

Save both file and Run.


Comments

Post a Comment

Popular posts from this blog

What is HTML? Complete Beginner’s Guide (with Examples)

-
Image
What is HTML? Complete Beginner’s Guide (with Examples) Are you new to web development and want to learn how websites are built? Then, understanding HTML is the first step. In this guide, we will explain HTML in simple terms, provide examples, and show you how to start creating your own web pages. Table of Contents What is HTML? Why is HTML Important? Basic Structure of an HTML Document HTML Tags and Elements Examples of HTML Code How to Create Your First Web Page Tips for Learning HTML Conclusion 1. What is HTML? HTML (HyperText Markup Language) is the standard language used to create web pages. It is not a programming language—it’s a markup language that tells web browsers how to display content. With HTML, you can: Add text, headings, and paragraphs Insert images, videos, and links Create tables, lists, and forms Build structured websites 2. Why is HTML Important? HTML is the backbone of every website. Without HTML, the internet as ...
Read more

HTML Forms — Input, Label, Button & Validation (Explained Like a Teacher With Examples)

-
Image
HTML Forms — Input, Label, Button & Validation  When you browse any website, you often fill forms — login forms, search forms, payment forms, enquiry forms, registration forms, and many more. All these are created using HTML Forms . As your teacher, I will help you understand this topic in the simplest way. By the end of this lesson, you will be able to: Create forms Use labels, inputs, and buttons Add validation Build a clean and professional form Let’s learn step-by-step. What is an HTML Form?  An HTML form is like a digital notebook page where we ask the user to write information. If we need the user’s: Name Email Age Password Message …then a form helps us collect that information. HTML form uses the <form> tag: <form action="submit.php" method="POST"> <!-- form fields --> </form> Important attributes action → Where the data will go method → How the data will be sent POST → Sa...
Read more

Difference Between HTML and HTML5 (2025 Explained) | Features, Advantages & Comparison Table

-
Image
Introduction If you want to become a web developer in 2025, the first thing you must understand is the difference between HTML and HTML5 . Both are markup languages used to create web pages, but HTML5 is a major upgrade with advanced features like audio/video support, semantic tags, offline storage, and faster performance. This article explains everything in easy language, with examples and a full comparison table — perfect for students, beginners, and bloggers. What is HTML? HTML stands for HyperText Markup Language . It is used to structure content on a webpage using tags like: <html> <head> <body> <p> <img> <table> HTML versions before HTML5 depended heavily on external plugins like Flash or Silverlight for audio, video, and animations. What is HTML5? HTML5 is the latest version of HTML , introduced to support modern web needs like: multimedia (audio & video) animations games responsive websites ...
Read more