---
description: >-
  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

## Export HTML Table Data To Excel, CSV, PNG And PDF Using JQuery Plugin

Last Updated On: [January 16, 2020](https://www.phpflow.com/php/export-html-table-data-to-excel-csv-png-and-pdf-using-jquery-plugin/)| By: [Parvez](https://www.phpflow.com/author/admin/)

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.

[![Simple Example to extract table data into JSON XML,PNG,CSV,TXT,SQL,MS-Word,Ms-Excel,Ms-Powerpoint and PDF format using jquery and php](https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png)](https://www.phpflow.com/wp-content/uploads/2015/09/export-table-data-toexcel-png-pdf.png)

#### We Can Export **HTML** Tables To The Following Formats:

1. JSON
2. XML
3. PNG
4. CSV
5. TXT
6. SQL
7. MS-Word
8. Ms-Excel
9. Ms-Powerpoint
10. 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,

* [Exporting Data to Excel with PHP and MySQL](https://www.phpflow.com/php/exporting-data-to-excel-with-php-and-mysql/)
* [Export Data to CSV and Download Using PHP and MySQL](https://www.phpflow.com/php/export-data-to-csv-and-download-using-php-and-mysql/)
* [Import CSV File Into MySql Using PHP](https://www.phpflow.com/php/import-csv-file-into-mysql/)
* [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 the jQuery Datatable data to PDF,Excel,CSV and Copy](https://www.phpflow.com/php/how-to-export-the-jquery-datatable-data-to-pdfexcelcsv-and-copy/)

### 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

[  Live Demo](https://www.phpflow.com/demo/tableExport-jquery-plugin-demo/)

[ Download Source Code](https://www.phpflow.com/source_code/tableExport-jquery-plugin-code/tableExport-jquery-plugin-code.zip)**Debug:** it's the locked content, but now it's revealed. [Why?](https://www.phpflow.com/php/export-html-table-data-to-excel-csv-png-and-pdf-using-jquery-plugin)

&#x20;[jquery Plugin](https://www.phpflow.com/category/jquery-plugin-2/), [Php](https://www.phpflow.com/category/php/)  [convert html to excel](https://www.phpflow.com/tag/convert-html-to-excel/), [export html table](https://www.phpflow.com/tag/export-html-table/), [export html table data](https://www.phpflow.com/tag/export-html-table-data/), [export html table to csv](https://www.phpflow.com/tag/export-html-table-to-csv/), [export html table to excel](https://www.phpflow.com/tag/export-html-table-to-excel/), [export html table to excel jquery](https://www.phpflow.com/tag/export-html-table-to-excel-jquery/), [export html table to json](https://www.phpflow.com/tag/export-html-table-to-json/), [export html table to pdf](https://www.phpflow.com/tag/export-html-table-to-pdf/), [export html table to png](https://www.phpflow.com/tag/export-html-table-to-png/), [export html table to xls](https://www.phpflow.com/tag/export-html-table-to-xls/), [html table to xml](https://www.phpflow.com/tag/html-table-to-xml/), [jquery datatable export to excel](https://www.phpflow.com/tag/jquery-datatable-export-to-excel/), [jquery export to pdf](https://www.phpflow.com/tag/jquery-export-to-pdf/), [jquery plugin](https://www.phpflow.com/tag/jquery-plugin/), [jquery tutorials](https://www.phpflow.com/tag/jquery-tutorials/), [php tutorials](https://www.phpflow.com/tag/php-tutorials/).  [permalink](https://www.phpflow.com/php/export-html-table-data-to-excel-csv-png-and-pdf-using-jquery-plugin/).
