Php

Export HTML Table Data to Excel, CSV, PNG and PDF using jQuery Plugin

In this jQuery 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 feature in websites. There is a lot of plugins which are used to export table data into xml, csv and png format but that will use in a separate jquery file for each exporting format.

The tableExport is a wonderful jquery plugin that extracts 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 the basic use of tableExport jquery plugin with HTML table, The table listing data with dynamic data using PHP and MySQL.

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 the Following dependencies libs that we need to include into the head section of index.html file or Project. The jQuery plugin is necessary to tableExport the jquery plugin.

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

<script type="text/javascript" src="html2canvas.js"></script>

How To Import Table data into PDF format:

We need to include the below files into your head section to export table data into PDF format.

Related Post
<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 options are:

  • separator: ‘,’
  • ignoreColumn: [2,3]
  • tableName:’yourTableName’
  • type:’csv’
  • pdfFontSize:14
  • pdfLeftMargin:20
  • escape:’true’
  • htmlContent:’false’
  • consoleLog:’false’

Other Types are:

{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 export table data with PHP and MySQL.

Let’s demonstrate the integration of exportTable with PHP and MySQL, it’s 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 the jquery plugin into the head section of index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<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 the database.

<?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.

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

Step 4: Call exportTable function to export data on click of format icon.

<ul>

   <li><a href="#"> <img src="images/json.jpg" width="24px"> JSON</a></li>


   <li><a href="#"><img src="images/json.jpg" width="24px">JSON (ignoreColumn)</a></li>

</ul>

You can download source code and Demo from below link

View Comments

Recent Posts

Configure and Retrieve S3 Information Using Laravel PHP-AWS-SDK

This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More

2 months ago

What is the Purpose of php_eol in PHP?

in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More

8 months ago

Laravel Table Relationship Methods With Example

This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More

8 months ago

Exploring the Power of Laravel Eloquent Join?

We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More

9 months ago

Quick and Easy Installation of Laravel Valet

in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More

9 months ago

What is Laravel Soft Delete and How Does it Work?

I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More

9 months ago

Categories