Tuesday, 6 January 2015

Converting HTML into XLS using Javascript

JavaScript

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <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]--></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>

Sample HTML Code

<input type="button" onclick="tableToExcel('table', 'Example Table')" value="Export to Excel">
    <table id="table" summary="Code page support in different versions of MS Windows."


           .........................table design............................




    </table>
        





Converting HTML into CSV using Javascript




<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Adila Faruk">
         

        <title>Exporting Data to a CSV File</title>


        <style type="text/css">
            body{
                font-family: sans-serif;
                font-weight:300;
                padding-top:30px;
                color:#666;
            }
            .container{
                text-align:center;  
            }
            a{ color:#1C2045; font-weight:350;}
            table{
                font-weight:300;
                margin:0px auto;
                border: 1px solid #1C2045;
                padding:5px;
                color:#666;

            }
            th,td{ 
                border-bottom: 1px solid #dddddd;
                text-align:center;
                margin: 10px;
                padding:0 10px;
            }
            hr{ 
                border:0;
                border-top: 1px solid #E7C254;
                margin:20px auto;
                width:50%;
            }
            .button{
                background-color:#1C2045;
                color:#E7C254;
                padding:5px 20px;
                max-width: 300px;
                line-height:1.5em;
                text-align:center;
                margin:5px auto;
            }
            .button a{ color:#E7C254;}
            .refs{ display:block; margin:auto; text-align:left; max-width:500px; }
            .refs .label{  font-size:1.4em;}
            .refs > ul{ margin-top:10px; line-height:1.5em;}
        </style>
    </head>

    <body>
        <div class='container'> 
          <div id="dvData">
                <table>
                    <tr>
                        <th>Column One</th>
                        <th>Column Two</th>
                        <th>Column Three</th>
                    </tr>
                    <tr>
                        <td>Row 1 Col 1</td>
                        <td>Row 1 Col 2</td>
                        <td>Row 1 Col 3 </td>
                    </tr>
                    <tr>
                        <td>Row 2 Col 1</td>
                        <td>Row 2 Col 2</td>
                        <td>Row 2 Col 3</td>
                    </tr>
                    <tr>
                        <td>Row 3 Col 1</td>
                        <td>Row 3 Col 2</td>
                        <td>Row 3 Col 3</td>
                    </tr>
                </table>
            </div>
            <br/>
            <div class='button'>
                <a href="#" id ="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
                </a>
            </div>

            <hr/>
            <div class='refs'>
            <div class='label'>References</div>
            <ul>

            <li><a href="http://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html" target="_blank">Export to CSV using jQuery and HTML (Stack Overflow)</a>
            </li>
            <li> 
            <a href="http://adilapapaya.wordpress.com/2013/11/15/exporting-data-from-a-web-browser-to-a-csv-file-using-javascript/" target="_blank">adilapapaya.wordpress.com</a>
            </li>
            </ul>
            </div>
            <hr/>
        </div>

        <!-- Scripts ----------------------------------------------------------- -->
        <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
        <!-- If you want to use jquery 2+: https://code.jquery.com/jquery-2.1.0.min.js -->
        <script type='text/javascript'>
        $(document).ready(function () {

            console.log("HELLO")
            function exportTableToCSV($table, filename) {
                var $headers = $table.find('tr:has(th)')
                    ,$rows = $table.find('tr:has(td)')

                    // Temporary delimiter characters unlikely to be typed by keyboard
                    // This is to avoid accidentally splitting the actual contents
                    ,tmpColDelim = String.fromCharCode(11) // vertical tab character
                    ,tmpRowDelim = String.fromCharCode(0) // null character

                    // actual delimiter characters for CSV format
                    ,colDelim = '","'
                    ,rowDelim = '"\r\n"';

                    // Grab text from table into CSV formatted string
                    var csv = '"';
                    csv += formatRows($headers.map(grabRow));
                    csv += rowDelim;
                    csv += formatRows($rows.map(grabRow)) + '"';

                    // Data URI
                    var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

                $(this)
                    .attr({
                    'download': filename
                        ,'href': csvData
                        //,'target' : '_blank' //if you want it to open in a new window
                });

                //------------------------------------------------------------
                // Helper Functions 
                //------------------------------------------------------------
                // Format the output so it has the appropriate delimiters
                function formatRows(rows){
                    return rows.get().join(tmpRowDelim)
                        .split(tmpRowDelim).join(rowDelim)
                        .split(tmpColDelim).join(colDelim);
                }
                // Grab and format a row from the table
                function grabRow(i,row){
                     
                    var $row = $(row);
                    //for some reason $cols = $row.find('td') || $row.find('th') won't work...
                    var $cols = $row.find('td'); 
                    if(!$cols.length) $cols = $row.find('th');  

                    return $cols.map(grabCol)
                                .get().join(tmpColDelim);
                }
                // Grab and format a column from the table 
                function grabCol(j,col){
                    var $col = $(col),
                        $text = $col.text();

                    return $text.replace('"', '""'); // escape double quotes

                }
            }


            // This must be a hyperlink
            $("#export").click(function (event) {
                // var outputFile = 'export'
                var outputFile = window.prompt("What do you want to name your output file (Note: This won't have any effect on Safari)") || 'export';
                outputFile = outputFile.replace('.csv','') + '.csv'
                 
                // CSV
                exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);
                
                // IF CSV, don't do event.preventDefault() or return false
                // We actually need this to be a typical hyperlink
            });
        });
    </script>
    </body>
</html>









Dynamic Table Populate and print using JavaScript

<style>
    #datacontainer {
        border: 5px!important;
    }
    #btnClick {
        float: right;
        margin-top: -30px;
    }
    table thead th { border-bottom: 1px solid #000; }
    table tfoot td { border-top: 1px solid #000; }
</style>
<button id="btnClick" type="button">Get Data</button>
<div class="clear-fix"></div>
<div id="main">
    <table id="datacontainer" width="100%">
        <thead>
            <tr>
                <th style="font-weight: bold; text-align: center; width: 50px;">Id</th>
                <th style="font-weight: bold; text-align: left; width: 50px; padding-left: 15px;">Name</th>
                <th style="font-weight: bold; text-align: right; width: 50px; padding-right: 15px;">Amount</th>
                <th style="font-weight: bold; text-align: left; width: 50px; padding-left: 15px;">Address</th>
            </tr>
        </thead>
        <tbody id="hook">
            <tr id="template" hidden="hidden">
                <td id="id" style="text-align: center; width:50px;"></td>
                <td id="name" style="text-align: left; width:50px; padding-left: 15px;"></td>
                <td id="amt" style="text-align: right; width:50px; padding-right: 10px;"></td>
                <td id="add" style="text-align: left; width:50px; padding-left: 15px;"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan=4></td>
            </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript">
    $(function () {
        var url = '@Url.Action("GetData")';
        $('#btnClick').click(function (event) {
            event.preventDefault();
            var template = $('#template');
            $('#hook').html(template);
            $.ajax(url, {
                dataType: 'json'
            }).done(function (data) {
                $.each(data.data, function (key, value) {
                    var row = $('#template').clone();
                    $(row).attr('id', 'id' + key);
                    $(row).removeAttr('hidden');
                    polpulateData(row, value);
                    $(row).appendTo($('#hook'));
                });
                var printData = $('#main').html();
                $(printData, '#btnClick').css('display', 'none');
                popup(printData);
            });
            return false;
        });

        function polpulateData(row, data) {
            $(row).find('#id').text(data.Id);
            $(row).find('#name').text(data.Name);
            $(row).find('#amt').text(data.Amount);
            $(row).find('#add').text(data.Address);
        }

        function popup(data) {
            var mywindow = window.open('', 'Sample', 'height=400,width=600');
            mywindow.document.write('<html><head><title>Sample</title>');
            /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');
            mywindow.focus();
            mywindow.print();
            //mywindow.close();

            return true;
        }
    });
</script>









Posted by



at





































No comments:















Post a Comment


















        

      









Subscribe to:
Post Comments (Atom)