Export HTML Table Data To Excel, CSV, PNG And PDF Using JQuery Plugin
https://www.phpflow.com/php/export-html-table-data-to-excel-csv-png-and-pdf-using-jquery-plugin/
Export HTML Table Data To Excel, CSV, PNG And PDF Using JQuery Plugin
Last Updated On: January 16, 2020| By: Parvez
In this tutorial, We will export HTML table data into Excel, CSV, PNG and PDF using jQuery Plugin.Exporting data into a format is a very common features in website.There is a lot of plugin which are used to export table data into xml, csv and png format but that will use for separate jquery file for each exporting format.
The tableExport is a wonderful jquery plugin which extracting table data into all formats like JSON , XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF, so with help of this jquery plugin you don’t need any other jquery plugin to extract data from tables.You can integrate tableExport plugin very easily with your project.
Here, i will let you know basic use of tableExport jquery plugin with HTML table and with dynamic data using php and mysql.
We Can Export HTML Tables To The Following Formats:
JSON
XML
PNG
CSV
TXT
SQL
MS-Word
Ms-Excel
Ms-Powerpoint
PDF
How To Use Table Export JQuery Plugin :
There are Following dependencies libs which we need to includes into the head section of index.html file or Project. The jQuery plugin is necessary to tableExport jquery plugin.
123
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="tableExport.js"></script><script type="text/javascript" src="jquery.base64.js"></script>
How To Import Table Data Into PNG Format:
we need to include html2canvas.js file into your head section to export table data into PNG format.
1
<script type="text/javascript" src="html2canvas.js"></script>
How To Import Table Data Into PDF Format:
We need to include below files into your head section to export table data into PDF format.
123
<script type="text/javascript" src="jspdf/libs/sprintf.js"></script><script type="text/javascript" src="jspdf/jspdf.js"></script><script type="text/javascript" src="jspdf/libs/base64.js"></script>
Other Option Are:
separator: ‘,’
ignoreColumn: [2,3]
tableName:’yourTableName’
type:’csv’
pdfFontSize:14
pdfLeftMargin:20
escape:’true’
htmlContent:’false’
consoleLog:’false’
Other Type Are:
12345678910111213141516
{type:'json',escape:'false'}{type:'json',escape:'false',ignoreColumn:'[2,3]'}{type:'json',escape:'true'} {type:'xml',escape:'false'}{type:'sql'} {type:'csv',escape:'false'}{type:'txt',escape:'false'} {type:'excel',escape:'false'}{type:'doc',escape:'false'}{type:'powerpoint',escape:'false'} {type:'png',escape:'false'}{type:'pdf',pdfFontSize:'7',escape:'false'}
You can also check other tutorial of Export Data with PHP,
How To Use Export Table With Php And Mysql.
Let’s demonstrate integration of exportTable with php and mysql,its very easy and simple.We need to follow following below points to export html table data into Excel, CSV, JSON, PDF, PNG using jQuery,php and MySQL.
Step 1: Include all necessary files of exportTable jquery plugin into head section of index.php.
123456789
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/><script type="text/javascript" src="tableExport.js"></script><script type="text/javascript" src="jquery.base64.js"></script><script type="text/javascript" src="html2canvas.js"></script><script type="text/javascript" src="jspdf/libs/sprintf.js"></script><script type="text/javascript" src="jspdf/jspdf.js"></script><script type="text/javascript" src="jspdf/libs/base64.js"></script><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Step 2: Create PHP Connection with MYSQL database to get all records from database.
1234567891011121314
<?php//mysql_connect('localhost', 'root');//mysql_select_db('test');$con=mysqli_connect("localhost","root","pass","test"); $qry="SELECT * FROM employee";$result=mysqli_query($con, $qry); $records = array(); while($row = mysql_fetch_assoc($result)){ $records[] = $row;}?>
Step 3: Create UI of table grid and bind MYSQL records with HTML table.
12345678910111213141516171819202122
<div class="row" style="height:300px;overflow:scroll;"> <table id="employees" class="table table-striped"> <thead> <tr class="warning"> <th>Id</th> <th>Name</th> <th>Salary</th> <th>age</th> </tr> </thead> <tbody> <?php foreach($records as $rec):?> <tr> <td><?php echo $rec['id']?></td> <td><?php echo $rec['employee_name']?></td> <td><?php echo $rec['employee_salary']?></td> <td><?php echo $rec['employee_age']?></td> </tr> <?php endforeach; ?> </tbody> </table></div>
Step 4: Call exportTable function to export data on click of format icon.
12
<li><a href="#" onclick="$('#employees').tableExport({type:'json',escape:'false'});"> <img src="images/json.jpg" width="24px"> JSON</a></li> <li><a href="#" onclick="$('#employees').tableExport({type:'json',escape:'false'});"><img src="images/json.jpg" width="24px">JSON (ignoreColumn)</a></li>
You Can Download Source Code And Demo From Below Link
Download Source CodeDebug: it's the locked content, but now it's revealed. Why?
jquery Plugin, Php convert html to excel, export html table, export html table data, export html table to csv, export html table to excel, export html table to excel jquery, export html table to json, export html table to pdf, export html table to png, export html table to xls, html table to xml, jquery datatable export to excel, jquery export to pdf, jquery plugin, jquery tutorials, php tutorials. permalink.
Last updated