How to use jsPDF addHTML?

Question

I’ve been trying to use jsPDF for some time to create a pdf of a specific page in a project. However, all the examples I looked at that include this function (addHTML) do not work. In the developer examples (http://mrrio.github.io/jsPDF/examples/basic.html) there is nothing referring to addHTML with only fromHTML that does not satisfy my needs due to the fact that CSS is not rendered.

I would like someone to explain how I should use addHTML to render all of a page, including what I should include in mine and the button that will call the addHTML function to work correctly.

I greatly appreciate the help.

Answer 1

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 according to 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 early stages (as the example informs) and probably does not render completely, ie does not yet support various CSS and HTML properties.

Note that the rendering is not "real", which I mean the software only simulates CSS and HTML properties, meaning 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, however it is not in PDF format, the html2canvas, however it is totally experimental and also has many things to be implemented, but it shows to be well advanced:

Example of use:

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

Whether you use external website Resources or other ports, such as https carrying http or otherwise, so it will be necessary to use a 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 the Svgs within the Canvas, but the moment we use <foreignObject>, the browsers WebKit and Blink/Chromium have security blocks when using this, ie you can draw, but can not use toDataURI (in Firefox works if you use CORS).

The following example is simple, taken from MDN, to use <link> (style sheets) and CSS properties will need to convert them to <style> and convert the url(...) to the Data URI Scheme and even then text sources will not be supported (as amazing as it seems I’m working for a few months on a library that does all this, takes "photo" of the page using SVG, only stopped because of the issue of web-sources, which is very difficult to embed in SVG)so you can try, but it will only work in browsers with the Gecko engine (used Firefox) and it will still be a bit of a hassle to import, but CSS and HTML effects will probably all work, follow simple example:

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), for 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>';

Completion

With the exception of SVG + Canvas, no library has sufficient support yet to simulate the HTML and CSS effects of browsers yet and even if you get this, you’ll still be subject to Bugs or you won’t be able to follow the engines of web browsers in real time, as it’s all "simulated".