Export HTML Table into Excel,CSV and Text Using TableExport
source link: https://www.js-tutorials.com/jquery-tutorials/export-html-table-excel-csv-text-using-tableexport/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Export HTML Table into Excel,CSV and Text Using TableExport
TableExport is a very popular jQuery plugin to export HTML data into Excel, CSV and Text format. Export help to store information into a file in a readable format. Excel, CSV and Text are very common formats to export data. You can also use a CSV file to store data in MySQL.
TableExport.js is a simple and easy-to-implement jQuery plugin that allows you to quickly and dynamically convert HTML tables to Excel spreadsheets .xls
, .xlsx
, comma separated values .csv
, and plain text .txt
by only one line of code.
I have only one limitation as like other exporting jQuery plugins we can only export visible HTML data, like if we are seeing 10 records in HTML table then i can export only 10 records in CSV, PDF,Excel etc.
You can also check other tutorials of export table data,
The tablexport jquery plugin has following export format option,
tableexport.js
jQuery plugin has following dependency file,
- jQuery.js
- FileSaver.js
- Bootstrap : This is optional
- Blob : This will use for OLD browser support.
Step 1: We need to include following TableExport plugin library files in head section of index.html
.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.5/css/tableexport.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.5/js/tableexport.min.js"></script>
Step 2: Created HTML markup layout in index.html
file.
<div class="tbl_container1"> <table id="listing" class="table table-bordered table table-hover" width="100%" cellspacing="0"><colgroup><col><col><col></colgroup> <thead> <tr> <th>Name</th> <th>Salary</th> <th>Age</th> </tr> </thead> <tbody id="emp_body"></tbody> </table> </div>
Step 3: Added some styles for table scroll-bar and export buttons into head section of index.html
file.
table ,tr td{ border:1px solid red } tbody { display:block; height:450px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */ } .btn-toolbar { margin-left: 0px; }
Step 4: Created AJAX request to fetch data from server using rest api.
<script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: "http://dummy.restapiexample.com/api/v1/employees", async: true, dataType: 'json', success: function (data) { var tr; for (var i = 0; i < data.length; i++) { tr = $('<tr/>'); tr.append("<td>" + data[i].employee_name + "</td>"); tr.append("<td>" + data[i].employee_salary + "</td>"); tr.append("<td>" + data[i].employee_age + "</td>"); $('#emp_body').append(tr); } ExportTable(); } }); });
as you can above code,I am using a dummy Rest Api of http://dummy.restapiexample.com to get all employee records,
also calling javascript ExportTable();
method for configure table-export plugin on HTML table, Now i will define this method.
Step 5: Configure tableExport on HTML table using the constructor.
$(document).ready(function(){ function ExportTable(){ $("table").tableExport({ headings: true, // (Boolean), display table headings (th/td elements) in the <thead> footers: true, // (Boolean), display table footers (th/td elements) in the <tfoot> formats: ["xls", "csv", "txt"], // (String[]), filetypes for the export fileName: "id", // (id, String), filename for the downloaded file bootstrap: true, // (Boolean), style buttons using bootstrap position: "well" , // (top, bottom), position of the caption element relative to table ignoreRows: null, // (Number, Number[]), row indices to exclude from the exported file ignoreCols: null, // (Number, Number[]), column indices to exclude from the exported file ignoreCSS: ".tableexport-ignore" // (selector, selector[]), selector(s) to exclude from the exported file }); } });
Download Source Code & Demo:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK