Generating PDF from complex html table using JSPDF

Viswa picture Viswa · Apr 27, 2015 · Viewed 10.2k times · Source

I am trying to generate pdf from html using JSPDF and html having one complex table, Added image below.

enter image description here

You can see in this Fiddle, What i tried so far.

pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
    'width': margins.width, // max width of content on PDF
    'elementHandlers': specialElementHandlers
},

function (dispose) {
    // dispose: object with X, Y of the last line add to the PDF 
    //          this allow the insertion of new lines after html
    pdf.save('Test.pdf');
}, margins);

Problem is, when i try to generate pdf i am getting

Uncaught TypeError: Cannot read property 'name' of undefined

Is it possible to use JSPDF for this kind of complex table or will it only work for a simple table.

EDIT: Solved this by different way, This is what i did

  1. I converted HTML Table into Canvas html2canvas.js
  2. You can get canvas as Base64 image using canvas.toDataURL("image/jpeg")
  3. Once i got Base64 image, Created empty PDF using JSPDF and using addImage feature of JSPDF, i manage to embed Base64 image inside PDF.

Credit goes to my brain.

Answer

bingecoder picture bingecoder · Aug 10, 2016

I was able to fix this by modifying line 6203 of jspdf.debug.js (on version 1.2.61) to this:

while (j < tableRow.cells.length && headers[j] != undefined) {

Which was originally:

while (j < tableRow.cells.length) {

Alternatively, I could make it go away by adding another td to the tr it was processing (it only had one td, which apparently caused the problem).

I'm thinking I'll try to submit it as a bug fix.