Sharp Tutorial
Export HTML table to Excel &pdf using js

Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs

  • export html table to excel using js
  • search drop down left to right and vice verca
  • Get value from drop down list using js
  • dynamic table add/delete row using js
  • Rotate image in div using js
  • Set selected value in drop down

FAQ Category

  • Java Script FAQ
  • Python FAQ
  • C/C++ FAQ

Java Script Based FAQ

Q How to Export HTML table to Excel or PDF using java Script.

Ask New Question

asked on 27'Jan'20

Yash

Tag : JavaScript

<html>
<head>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function exportToExcel()
{
    var text="<table border='1px'><tr bgcolor='#87AFC6'>";
    table = document.getElementById('tableId'); // id of your table
    for(var i = 0 ; i < table.rows.length ; i++) 
    {     
        text=text+table.rows[i].innerHTML+"</tr>";
    }
    text=text+"</table>";
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 
    tableData = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(text));  
    return (tableData);
}
function ExportToPDF() {
            html2canvas(document.getElementById('tableId'), {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 500
                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Table.pdf");
                }
            });
        }
</script>
</head>
<body>
<center>
<table id="tableId" bgcolor="yellow" border="2">
<th>RollNo</th><th> Name</th><th>Course</th><th> Phone</th>
<tr>
<td>4563</td>
<td>Yash</td>
<td>BCA</td>
<td>938499944</td>
</tr>
<tr>
<td>4593</td>
<td>jatin</td>
<td>MCA</td>
<td>9353499944</td>
</tr>
<tr>
<td>4563</td>
<td>Yash</td>
<td>BCA</td>
<td>938499944</td>
</tr>
<tr>
<td>4593</td>
<td>jatin</td>
<td>MCA</td>
<td>9353499944</td>
</tr>

</table>
<br><br><button  onclick="exportToExcel();"> ExportToExcel </button><button onclick="ExportToPDF();">Export to PDF</button>
</center>
</body>
</html>

answered 28 jan'20

Adesh Rajput

Tag : JavaScript

Live Preview

Enquiry about Course

Ask your Question

Click Here

Sharp (2) Tutorials

Video/ C Introduction

Watch video in full size

Video tutorial

Follow by Email
Facebook
Facebook
fb-share-icon
YouTube
Copyright © Sharp Tutorial
Build with WordPress
Wordpress Social Share Plugin powered by Ultimatelysocial
Sharp Tutorial