fromHTML - Uncaught TypeError: Cannot read property 'length' of null

[airandfingers]

I get this error when I try to call fromHTML on my pdf object:

Uncaught TypeError: Cannot read property 'length' of null jspdf.debug.js:2875
ResolveUnitedNumber jspdf.debug.js:2875
GetCSS jspdf.debug.js:2895
DrillForContent jspdf.debug.js:2986
done jspdf.debug.js:3041
loadImgs jspdf.debug.js:3058
process jspdf.debug.js:3073
jsPDFAPI.fromHTML jspdf.debug.js:3269
PaneView.extend.createPdf ReportsPage.js:349

My code (ReportsPage.js):

createPdf : function( $obj ) {
    var _this = this,
        d = new Date().toISOString().slice(0, 19).replace(/-/g, ""),
        filename = 'report_' + d + '.pdf',
        pdf = new jsPDF('p', 'in', 'letter'),
        specialElementHandlers = {
          '#editor': function( element, renderer ) {
              return true;
          }
    };
    pdf.fromHTML(
          $obj.get(0) // HTML element
        , 0.5  // x coord
        , 0.5  // y coord
        , {
              'width': 170 // was 7.5, max width of content on PDF
            , elementHandlers: specialElementHandlers
        }
    );
    pdf.save( filename );
},

The HTML being passed to fromHTML (with added indents and spaces to avoid Markdown rendering the HTML):

< div>
    < h1>Meow< /h1>
    < table>< thead>< tr>
        < th>Header 0< /th>< th>Header 1< /th>< th>Header 2< /th>< th>Header 3< /th>
    < /tr>< /thead>
    < tbody>
        < tr>< td>0.0< /td>< td>0.1< /td>< td>0.2< /td>< td>0.3< /td>< /tr>
        < tr>< td>1.0< /td>< td>1.1< /td>< td>1.2< /td>< td>1.3< /td>< /tr>
        < tr>< td>2.0< /td>< td>2.1< /td>< td>2.2< /td>< td>2.3< /td>< /tr>
        < tr>< td>3.0< /td>< td>3.1< /td>< td>3.2< /td>< td>3.3< /td>< /tr>
        < tr>< td>4.0< /td>< td>4.1< /td>< td>4.2< /td>< td>4.3< /td>< /tr>
    < /tbody>< /table>
< /div>

Using latest version of jspdf.debug.js from this repo, and latest Chrome on Windows 7.

[diegocr]

I don't get such exception, but rather a weirdly generated PDF, check this:

http://jsfiddle.net/dGLmr/

I'll take a look at the fromHTML plugin next.

[airandfingers]

I get weird PDFs like the one generated by your jsfiddle too, but it seems to depend on the HTML I pass in. I was going to submit a separate issue for the weird-looking PDFs, but I couldn't find an HTML string like that above that reproducibly got past the "Cannot read property 'length'" error to allow the generation of the weird PDFs.

I have no idea why your jsfiddle doesn't result in the same error as mine. Maybe try the exact code I used to generate the HTML string, rather than entering it as HTML?

$obj = $('<div></div>');
$obj.append('<h1>Meow</h1>')
var $table = $('<table></table>'),
    $thead = $('<thead></thead>'),
    $tbody = $('<tbody></tbody>'),
    $tr, $td;
$tr = $('<tr></tr>');
_.each(_.range(0, 4), function(j) {
    $td = $('<th>' + 'Header ' + j + '</th>');
    $tr.append($td);
});
$thead.append($tr);
$table.append($thead);
_.each(_.range(0, 5), function(i) {
    $tr = $('<tr></tr>');
    _.each(_.range(0, 4), function(j) {
        $td = $('<td>' + i + '.' + j + '</td>');
        $td.append($('<table><thead><tr><th>1</th></tr></thead>' +
                     '<tbody><tr><td>A</td></tr></tbody></table>'));
        $tr.append($td);
    });
    $tbody.append($tr);
});
$table.append($tbody);
$obj.append($table);

I updated your jsfiddle with this code (and added Underscore): http://jsfiddle.net/dGLmr/1/

[diegocr]

Testing your jsfiddle i can see a blank PDF is generated. Moreover, I found three bugs there:

1. The jsPDF instance needs to be created using a 'pt' page unit.
2. If the HTML element isn't attached to the document it'll generate a blank page.
3. Nested tables aren't recognized and therefore rendered as plain text.

http://jsfiddle.net/dGLmr/2/

That plugin is ****ed up.... 😒

[airandfingers]

Thanks! Changing 'in' to 'pt' part seems to have fixed the TypeError.

Any suggestions/outlook for the nested tables? I can redesign the layout to avoid nested tables, if necessary.

[diegocr]

In cfbeaf9 i've replaced the use of innerHTML by textContent, this should avoid the nested tables (or any other element) from showing with html tags, obviously that was quick&dirty workaround which will just output the contents, take a look the above jsfiddle to see the result (i've just updated the dist files with these changes)

Btw, i've also added a bower.json file, that was my first contact with anything bower-related so since you asked for it feel free to check it and lmk if there is any issue :)

[airandfingers]

Thanks! As you said, the nested tables still only show the contents, but I understand that this is a difficult issue to solve completely.

To me and my very limited knowledge of bower, the bower.json file you've added looks good.

Any idea how to publish this update to bower? Or do we need @MrRio to get involved for bower publishing?

[diegocr]

It was my understanding Bower will automatically publish the updates by providing a bower.json file. What else needs to be done? The package is already registered:

http://bower.io/search/?q=pdf

[Ref=#184]

[airandfingers]

Hm yeah, that link does show that jspdf was updated 18 hours ago, but when
I run "bower info jspdf" I still see only one Available version - 0.9.0.

On Thu, Mar 27, 2014 at 6:29 PM, Diego Casorran notifications@github.comwrote:

It was my understanding Bower will automatically publish the updates by
providing a bower.json file. What else needs to be done? The package is
already registered:

[image: 14132812556]https://cloud.githubusercontent.com/assets/734313/2545500/275d55ae-b618-11e3-9b81-a2ccc9e20064.gif

http://bower.io/search/?q=pdf

[Ref=#184 https://github.com//issues/184]

Reply to this email directly or view it on GitHubhttps://github.com//issues/221#issuecomment-38880714
.

[diegocr]

My guess is that we'll need to wait for their crawling process to find the bower.json file, so let's say in 24 hours? However, i'm not sure if we need to Tag new versions or that was only needed if the json file is missing.