How to use jsPDF addHTML?

jsPDF

addHTML is a "super new" method and probably does not support all CSS and HTML properties, so this should be the reason for some of the problems you face.

A simple example as per the documentation:

var pdf = new jsPDF('p','pt','a4');

pdf.addHTML(document.body, function() {
    var string = pdf.output('datauristring');
    var iframe = document.createElement("iframe");

    iframe.src = string;
    document.body.appendChild(iframe);
});

Note: that jsPDF.fromHTML is also in the initial stages (as the example informs) and probably does not render completely, that is, it still does not support various CSS and HTML properties.

Note that the rendering is not "real", which is to say the software just simulates CSS and HTML properties, ie it tries to compensate for various aspects of the browser rendering engine, but does not support all properties.

html2canvas

There is another project that is also used to take "photos" of the page, but it is not in PDF format, html2canvas , but it is totally experimental and also has many things to implement, but it shows to be well advanced:

Example usage:

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

If you use resources from external sites or that are on other ports, such as https loading http or vice versa, therefore you must use proxy :

• python - Google Appengine
• node.js
• php
• asp.net (c #)
• asp classic (vbscript)
• python - any framework

Drawing DOM with SVG inside the Canvas

It is possible to draw SVGs within Canvas , but at the moment we use <foreignObject> , browsers WebKit and Blink/Chromium have security locks as use this, ie you can draw, but you can not use toDataURI (in Firefox it works if you use CORS ).

The following example is simple, purchased from MDN , to use % style and CSS properties will need to be converted to <link> and convert <style> to url(...) and even then text fonts will not be supported (unbelievably it looks like I'm working on some months in a library that does all this, takes "photo" of the page using SVG, I just stopped because of the question of web-sources, which is very difficult to embed in SVG), so you can try, but it will only work on browsers with the Gecko engine (used Firefox) and it will still be a bit laborious to import, but CSS and HTML effects all will probably work, simple example follows:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
             '<em>I</em> like' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             'cheese</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

Note that to use SVG you need a valid HTML (or better XHTML), to do this use this script:

var doc = document.implementation.createHTMLDocument("");

//Adicione o seu html, como por exemplo document.documentElement.innerHTML
doc.write(STRING DO CONTEUDO HTML);

doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);

var html = (new XMLSerializer).serializeToString(doc);

var docWidth  = Math.max(document.documentElement.clientWidth,
                         document.body.scrollWidth,
                         document.documentElement.scrollWidth,
                         document.body.offsetWidth,
                         document.documentElement.offsetWidth);

var docHeight = Math.max(document.documentElement.clientHeight,
                         document.body.scrollHeight,
                         document.documentElement.scrollHeight,
                         document.body.offsetHeight,
                         document.documentElement.offsetHeight);

var data = '<svg xmlns="http://www.w3.org/2000/svg" ' +
           'width="' + docWidth + '" height="' + docHeight + '">' +
           '<foreignObject width="100%" height="100%">' +
             html +
           '</foreignObject>' +
           '</svg>';

Conclusion

With the exception of SVG canvas , no library has enough yet to simulate the HTML and CSS effects of browsers yet, and even get it, it will still be subject to BUGs or it will not be able to follow the motors of the web-browsers in real time, because everything is "simulated".