Search code examples
javascriptphpjqueryhtmlexport-to-excel

Export HTML table to excel with text and images


This question has been asked a few other posts, but the solution is not provided. I want to get an Excel output from a HTML table with photos and text. I found the following two plugins for the Excel output(The most complete plug in my opinion):

http://ngiriraj.com/pages/htmltable_export/demo.php

and

http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html

<table id="customers" border="1" width="100%" >
<thead>         
    <tr class='warning'>
        <th>Country</th>
        <th>Population</th>
        <th>Date</th>
        <th>%ge</th>
        <th>Photo</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Chinna</td>
        <td>1,363,480,000</td>
        <td>March 24, 2014</td>
        <td>19.1</td>
         <td><img src="https://i.sstatic.net/CekuQ.jpg" width='60'  height='60'/></td>
    </tr>
    <tr>
        <td>India</td>
        <td>1,241,900,000</td>
        <td>March 24, 2014</td>
        <td>17.4</td>
       <td><img src="https://i.sstatic.net/CekuQ.jpg" width='60'  height='60'/></td>
    </tr>
    <tr>
        <td>United States</td>
        <td>317,746,000</td>
        <td>March 24, 2014</td>
        <td>4.44</td>
          <td><img src="https://i.sstatic.net/CekuQ.jpg" width='60'  height='60'/></td>
    </tr>
    <tr>
        <td>Indonesia</td>
        <td>249,866,000</td>
        <td>July 1, 2013</td>
        <td>3.49</td>
         <td><img src="https://i.sstatic.net/CekuQ.jpg" width='60'  height='60'/></td>
    </tr>
    <tr>
        <td>Brazil</td>
        <td>201,032,714</td>
        <td>July 1, 2013</td>
        <td>2.81</td>
        <td><img src="https://i.sstatic.net/CekuQ.jpg" width='60'  height='60'/></td>
    </tr>
</tbody>

and exporting as

<a href="#" onClick="$('#customers').tableExport({type:'excel',escape:'false'});">export</a>

I also included a column with images as shown in this fiddle as

If I export this table to Excel, the images are not showing. So how can I export those images too along with the data. What kind of output should be used?

If this is not possible in Excel output, what format should be used for output?


Solution

  • If you don't need an original Excel-File, but a file, which displays the columns of your table in Excel (And can be edited within Excel or LibreOffice Calc or many other programs), you should consider using CSV (comma-separated values).

    It's easy to create and edit and there is no need of using any PlugIn or Library.

    Possible Output

    Column Name 1, Column Name 2, Column Name 3
    'Row1Val1', 'Row1Val2', 'Row1Val3'
    'Row2Val1', 'Row2Val2', 'Row2Val3'
    'Row3Val1', 'Row3Val2', 'Row3Val3'
    

    Convert to Excel

    But in case you really want an Excel File, PHPExcel will be your friend. It uses the CSV file to create a fully operational Excel-File.

    include 'PHPExcel/IOFactory.php';
    
    $objReader = PHPExcel_IOFactory::createReader('CSV');
    
    // If the files uses a delimiter other than a comma (e.g. a tab), then tell the reader
    $objReader->setDelimiter("\t");
    // If the files uses an encoding other than UTF-8 or ASCII, then tell the reader
    $objReader->setInputEncoding('UTF-16LE');
    
    $objPHPExcel = $objReader->load('MyCSVFile.csv');
    $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
    $objWriter->save('MyExcelFile.xls');
    

    Example Code Snippet from: csv to excel conversion

    Image insertion

    PHP Excel provides a functionality to include images:

    $objDrawing = new PHPExcel_Worksheet_Drawing();
    $objDrawing->setName('PHPExcel logo');
    $objDrawing->setDescription('PHPExcel logo');
    $objDrawing->setPath('./images/phpexcel_logo.gif');       // filesystem reference for the image file
    $objDrawing->setHeight(36);            
    $objDrawing->setCoordinates('D24');    
    $objDrawing->setOffsetX(10);                
    $objDrawing->setWorksheet($objPHPExcel->getActiveSheet());
    

    Snippet From CodePlex.