Trying to use html2pdf but seems html2canvas is broke as fonts overlap and margin is cut off

[Aphexus]

https://ncatlab.org/nlab/show/!-modality

!-modality (1).pdf

The !- is shifted over and overlaps with modality. The right margin cuts off the text(seems to be a bug in sizing). Also page breaks breaks in the middle of elements/lines.

The code I'm using is relatively simple and I've tried many things to get different behavior but pretty much all have the same problems. This seems to be an issue with html2canvas and not html2pdf.

    var printPage = function(name)
    {
        var data = document.getElementsByTagName('body')[0];
        data = document.getElementById('Content');

        /*
        var opt = {
            margin:       1,
            filename:     name,
            image:        { type: 'jpeg', quality: 0.98 },
            jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait', floatPrecision:'smart' },
            pagebreak:    { mode: 'avoid-all', after: '#Content' },
            html2canvas:  { allowTaint: true, scale: 1, logging: true, dpi: 300, letterRendering: true, scrollY: -window.scrollY, scrollX: -window.scrollX},
        };*/

        var opt = {
            //margin:       [1,1,1,1],
            margin:       -1.0,
            filename:     name,
            image:        { type: 'jpeg', quality: 0.98 },
            jsPDF:        { unit: 'in', orientation: 'portrait', floatPrecision: 'smart', compress:true, pagesplit: true,},
            //pagebreak:    { mode: 'avoid-all', after: '#Content' },
            html2canvas:  { allowTaint: true, scale: 1, logging: true, dpi: 300, removeContainer: true, imageTimeout: 0, letterRendering: true, useCORS: true,},
        };

        //html2pdf().set(opt).from(document.getElementById('Container')).save();//.then(() => {                        });
        html2pdf().from(data).set(opt).save().then(() => {                        });
    }

    printPage(name);
}

[Aphexus]

It seems that this is due to size and positioning errors in the code. If I put the browser(Edge) in a window it will render differently. foreignObjectRendering:true fixes the !- issue.

The window size of the browser should not effect the layout yet it does. I can probably get it to work by hard coding some of the position and size parameters but not sure how robust it will be.

The pages center themselves and this, in my 1920x1080 screen causes a lot of white space along the margins. This seems to cause html2canvas issues. How ever it is calculating positions and sizes and all that seem to have some bug(at least with Edge). I can't use it in firefox(this is a Greasemonkey script) because of a firefox Sourcemap bug.

[milovangudelj]

Here just to point out something funny.

On GitHub mobile the title gets clipped like this: "Trying to use html2pdf but seems html2canvas is broke as f..."

Which is kinda funny if you ask me 😂

[Aphexus]

Here just to point out something funny.

On GitHub mobile the title gets clipped like this: "Trying to use html2pdf but seems html2canvas is broke as f..."

Which is kinda funny if you ask me 😂

lol.

[hilalbuyukgullu]

I have the same problem did you solve it? @Aphexus

[Aphexus]

I have the same problem did you solve it? @Aphexus

I don't' recall precisely but I'm pretty sure I didn't. I went ahead and used a completely different approach which I don't remember much either but basically used C# and some code that ran an internal version of chrome and did printing internally which was much easier and worked better.

https://github.com/Sicos1977/ChromiumHtmlToPdf

Gives you a command line tool to do the work. I don't remember the details though or even if it worked but I'm pretty sure it did and I didn't have any issues except for this:

https://github.com/Sicos1977/ChromiumHtmlToPdf/issues/95 https://github.com/Sicos1977/ChromiumHtmlToPdf/issues/94

IIRC once I got javascript working I was able to do everything I needed and had no real issues and if IIRC I just kept a list a links I wanted to print to pdf from the site, in fact, I think I wrote a tampermonkey script to track them, then after I got what I wanted I then ran them in to that program to print them and archive them.

It went pretty smoothly and was much easier to get going than using html2canvas... but not sure if they have updated things now that would make it work or not(clearly not fixing the bug if you are having issues).