How to get forward production with html2pdf / addHtml

[pablomaurer]

Problem

There are really a lot of issues all about the same of not getting it right with converting html2pdf. So I just roundup what i've found out to move forward, i'm shure it will help others.

Future Fix

There is a new html2pdf command which should be overall better. But at the moment this only ever renders one single page. But I hope @MrRio will find again time to work on it.

Fix outside Repo

• Go with deprecated function addHtml.
• To enable automatic Page Break add this option: {pagesplit: true} as soon as you enabled this, it will look really worse. make it again better with setting: pdf.internal.scaleFactor = 3.75; Maybe you have to play a bit to find your perfect value.
• Blurred & unsharp problems: you have to scale the canvas up example:

var element = document.getElementById('bod');

var pdf = new jsPDF('p', 'pt', 'a4');
pdf.internal.scaleFactor = 3.75;

var w = element.clientWidth;
var h = element.clientHeight;
var newCanvas = document.createElement('canvas');
newCanvas.width = w * 2; 
newCanvas.height = h * 2;
newCanvas.style.width = w + 'px';
newCanvas.style.height = h + 'px';
var context = newCanvas.getContext('2d');
context.scale(2, 2);

pdf.addHTML(element, {pagesplit: true, canvas: newCanvas}, function () {
    // var out = pdf.output('dataurlnewwindow'); // crashed if bigger file
    pdf.save('two-by-four.pdf')
});

Fix in Repo

• change addHtml function like so:

if (typeof html2canvas !== 'undefined' && !options.rstz) { // find this line
          if (options.retina) {
            var w = element.clientWidth;
            var h = element.clientHeight;
            var newCanvas = document.createElement('canvas');
            newCanvas.width = w * 2; // make the canvas double big
            newCanvas.height = h * 2; // make the canvas double big
            newCanvas.style.width = w + 'px';
            newCanvas.style.height = h + 'px';
            var context = newCanvas.getContext('2d');
            context.scale(2, 2); // make it double as big
            options.canvas = newCanvas;
          }
         return html2canvas(element, options);

Usage after Fix in Repo

var pdf = new jsPDF('p', 'pt', 'a4'); // basic create pdf
pdf.internal.scaleFactor = 3.75; // play with this value

pdf.addHTML(document.getElementById('bod'), {pagesplit: true, retina: true}, function () { // addHtml with automatic pageSplit
    var out = pdf.output('dataurlnewwindow'); // output format of your pdf -> there are a lot blob, base64....
});

More info on getting it sharper are in the html2canvas repo

Keeps beeing a problem (Images)

The image Plugin is really damn slow and stores everything forever. Will Maybe if I have bigger problems it, look into it.

[kkashi01]

This makes fonts scale properly. However page splits have no bottom Margin and it just cuts off.

Does anyone know how to specify bottom margin or has a workaround solution?

Thanks

[harishlalwani]

@mnewmedia Thanks your solution worked. It removed blurriness in pdf.