jsPDF Rendering Ignores HTML Table Formatting

Question

Good day!

I'm trying to render a pdf document from an html but the rendered document doesn't correctly show the cell formatting. It seems that it's ignoring the table tags completely and just renders the text.

Here is my html:

<!DOCTYPE html>
<html>
<head>
<title>Purchase Order Preview</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript" src="js/pdf.js"> </script>
    <script type="text/javascript" src="js/head.js"></script>        
    <script type="text/javascript" src="js/jspdf.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.cell.js"></script>    
    <script type="text/javascript" src="js/FileSaver.js"></script>
</head>

<body id="target">
   <div>PURCHASE ORDER.</div>
   
  
     <table>
     <colgroup>
   <col width="25%">
   <col width="25%">
   <col width="25%">
   <col width="25%">
   </colgroup>
          <tr>
           <td><label style="font-size:14px">P/O Number:</label></td>
           <td> <label id="viewManagementNumber" ></label></td>
           <td><label style="font-size:14px">Supplier Code:</label></td>
           <td> <label id="viewManagementSupplierID" ></label></td>
          </tr>
        </table>    
   <a id="exportpdf" data-role="button" data-inline="true" data-icon="download" style="background-color:#3388cc;color:#fff;border:0;" data-mini="true" data-theme="b">Download</a>
</body>
</html>

This is my javascript:

$("#exportpdf").click(function () {
  var doc = new jsPDF('p', 'pt', 'letter');

  //We'll make our own renderer to skip this editor
  var specialElementHandlers = {
   '#exportpdf': function(element, renderer){
    return true;
   }
  };

  //All units are in the set measurement for the document
  //This can be changed to "pt" (points), "mm" (Default), "cm", "in"
  doc.fromHTML($('#target').get(0), 15, 15, {
   'width': 170, 
   'elementHandlers': specialElementHandlers
  });
  
  doc.output('save', 'test.pdf');

 });

The output is simply this:

PURCHASE ORDER.

P/O Number:

KJV-VT 141016-001

Supplier Code:

MS54

Any kind of help will be appreciated.

Thanks.

possible duplicate of [How to export the Html Tables data into PDF using Jspdf](http://stackoverflow.com/questions/19807870/how-to-export-the-html-tables-data-into-pdf-using-jspdf) — RoToRa, Oct 30 '14 at 12:45

jsPDF Rendering Ignores HTML Table Formatting

0 Answers0