通过javascript导出表格html以使用文本和图像来表现出色

Question

my problem is images !!!! i export table this table html to excel but the images aren't exported in the table .

  <table class="order-table table sortable" id="tableadmin"> <thead> <tr> <th style="width:8px; min-width:8px; max-width:8px;">ID</th> <th>Télépro</th> <th>Date RDV</th> <th>Heure RDV</th> <th>Fiche</th> <th style="width:170px; min-width:170px; max-width:170px;">Compterendu</th> <th style="width:250px; min-width:250px;">Commentaire commercial</th> </tr> </thead> <tbody id="changetable" class="new"> <tr> <td> <?php echo $id ?> </td> <td> <?php echo $login ?> </td> <td> <?php echo $date ?> </td> <td> <?php echo $heure ?> </td> <td><img src="../img/fiche.png" /> </td> <td> <?php echo $compterendu ?> </td> <td> <?php echo $comment ?> </td> </tr> </tbody> </table> 

my problem is images !!!!

Answer 1

Writing images to the excel sheet using phpexcel class is a great feature , using this method we can draw the images inside the excel column it looks good and nice to have images with some descriptions.

While working on an Import/Export system I have noticed this facility of PHPExcel its really good and easy, Ok lets check the code for writing images to the excel sheet using PHPExcel.

include 'PHPExcel.php';
// Create new PHPExcel object
$objPHPExcel = new PHPExcel();
// Set properties
$objPHPExcel->getProperties()->setCreator("Jobin Jose");
$objPHPExcel->getProperties()->setLastModifiedBy("Jobin Jose");
$objPHPExcel->getProperties()->setTitle("Office 2007 XLSX Test Document");
$objPHPExcel->getProperties()->setSubject("Office 2007 XLSX Test Document");
$objPHPExcel->getProperties()->setDescription("Test document for Office 2007 XLSX, generated using PHPExcel classes.");
// Add some data
// echo date('H:i:s') . " Add some data\n";
$objPHPExcel->setActiveSheetIndex(0);
$objPHPExcel->getActiveSheet()->SetCellValue('A1', 'Hello');
$objPHPExcel->getActiveSheet()->SetCellValue('B2', 'world!');
//$objPHPExcel->getActiveSheet()->SetCellValue('C1', 'Hello');
$objPHPExcel->getActiveSheet()->SetCellValue('D2', 'world!');
$objPHPExcel->getActiveSheet()->setTitle('Simple');
$gdImage = imagecreatefromjpeg('uploads/t12.jpg');
// Add a drawing to the worksheetecho date('H:i:s') . " Add a drawing to the worksheet\n";
$objDrawing = new PHPExcel_Worksheet_MemoryDrawing();
$objDrawing->setName('Sample image');
$objDrawing->setDescription('Sample image');
$objDrawing->setImageResource($gdImage);
$objDrawing->setRenderingFunction(PHPExcel_Worksheet_MemoryDrawing::RENDERING_JPEG);
$objDrawing->setMimeType(PHPExcel_Worksheet_MemoryDrawing::MIMETYPE_DEFAULT);
$objDrawing->setHeight(150);
$objDrawing->setCoordinates('C1');
$objDrawing->setWorksheet($objPHPExcel->getActiveSheet());
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save(str_replace('.php', '.xlsx', __FILE__));
// Echo done
echo date('H:i:s') . " Done writing file.\r\n";
The out put will be like as follows.

Writing Images to Excel Using PHPExcel

The above code will create an “xlsx” formatted file because it uses 2007 excel classes If you want “xls” format just try with 2005 class do not for get to change the file format to “xls” while using 2005.

Answer 2

Here is a function I made, it's Javascript as you specified.

Add "remove" class on elements you do not want to show in the excel.

function exportExcel(id,name){ //<table> id and filename
    var today = new Date();
    var date = ('0'+today.getDate()).slice(-2)+"-"+('0'+(today.getMonth()+1)).slice(-2)+"-"+today.getFullYear();

    var file_name = name+"_"+date+".xls"; //filename with current date, change if needed
    var meta = '<meta http-equiv="content-type" content="text/html; charset=UTF-8" />';
    var html = $("#"+id).clone();

    html.find('.remove').remove(); //add the 'remove' class on elements you do not want to show in the excel
    html.find('a').each(function() { //remove links, leave text only
        var txt = $(this).text();
        $(this).after(txt).remove();
    });
    html.find('input, textarea').each(function() { //replace inputs for their respectives texts
        var txt = $(this).val().replace(/\r\n|\r|\n/g,"<br>");
        $(this).after(txt).remove();
    });
    html.find('select').each(function() { //replace selects for their selected option text
        var txt = $(this).find('option:selected').text();
        $(this).after(txt).remove();
    });
    html.find('br').attr('style', "mso-data-placement:same-cell"); //make line breaks show in single cell
    html = "<table>"+html.html()+"</table>";

    var uri = 'data:application/vnd.ms-excel,'+encodeURIComponent(meta+html);
    var a = $("<a>", {href: uri, download: file_name});
    $(a)[0].click();
}

Call it on an event, example:

$("#export_button").click(function(e){
    exportExcel("table_id", "filename");
});