page-break does not go completely to the next page

[campignon]

Hello,

We have a project which used version 0.8.2 and everything worked fine. We recently upgraded the plugin to version 0.9.0 and since then, when generating a PDF with page breaks (HTML elements with the class "html2pdf___page-break"), the following elements don't go completely to the next page. It seems that the computed remaining size is too small and the next element is divided into two between the current page and the next one.

Best regards.

[AntonSpaz]

I find the Page Break is working in Chrome (v67) and IE 11 (Win10) but not in Edge (v41.16299.492.0).

[events-jonas-chrisw]

doean't work here either....

[eKoopmans]

Interesting! Thanks for the report. Can anyone else verify that it's just in Edge?

I'm working on updating the page-break module, I've got one idea of a possible cause but it would help if someone could provide an example of the problem (in jsFiddle/etc). Thanks!

[LeoLetourneur]

Hi @eKoopmans, (thanks for your plugin :+1:)

I think it comes from the "data-html2canvas-ignore". Before using this plugin, I tried some functionnalities, including the page break, everything was OK.

Then I added elements in my page and I didn't want to print it in the PDF so I used the "data-html2canvas-ignore". From this point, the page break was no longer "full", and the height of the remaining part was the same of the height of my ignored element.

@campignon did you use "ignore" element ?

Waiting for a fix, I no longer use the "data-html2canvas-ignore" but I remove the elements of my DOM before printing.

[Hysteriaa]

Hello, @eKoopmans. We're using your plugin in our project. We really like it and appreciate your work. But these problems with page-breaks and max canvas size spoil everything:( Can you, please, tell me, when are you planning to release an update, in a few months or sooner?

Thanks a lot!

[AbelVM]

Same behavior with v0.9.1 :disappointed:

[AntonSpaz]

Hi Eric, (@eKoopmans)

I confirm @LeoLetourneur's discovery.

When I commented out the data-html2canvas-ignore tags, page break works correctly, at least for me, with the options I have set.

And just like @LeoLetourneur mentioned, I replaced using the data-html2cancas-ignore tags with a CSS class called excludeFromPDF that I apply to the HTML elements I don't want included in the PDF. Then it's a simple hide/show added to the click function.

Pasting options below, for reference.

/* Export to PDF button */     
 $('#btnExportPDF').button().click(function(){
            opt = {  margin:       0.25,
                     filename:     'Dashboard.pdf',
                     image:        { type: 'png', quality: 1.0 },
                     html2canvas:  { scale: 1.0},
                     jsPDF:        { unit: 'in', format: 'letter', orientation: 'landscape' }
                  };
            $('.excludeFromPDF').hide();
            elem = $('#pageContent1')[0].innerHTML;                                        
            elem += $('#pageContent2')[0].innerHTML;
            html2pdf(elem,opt);   
            $('.excludeFromPDF').show();
           }); 

[eKoopmans]

Hi @LeoLetourneur @AntonSpaz, thanks for the investigation, and the work-around! When I have a chance to work on the page-break module I'll fix it to hide those elements before calculating page-breaks (and hyperlink positions). For now, anyone visiting here, the code sample from @AntonSpaz is a good example of how to get around the issue temporarily (manually hiding those elements yourself before calling html2pdf).

[Lukerayn3r]

Hi @eKoopmans,

I have came across this problem as well but I am not using the data-html2cancas-ignore tags but it still doesn't seem to work.

I can confirm that it is working perfectly on Chrome but when using Edge it doesn't add the page break.

Has this been looked into any further or is it still in your back backlog?

I am using this script: https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js could this be the issue?

Thanks!

[darbandi]

https://github.com/eKoopmans/html2pdf.js/issues/184#issuecomment-847420924

it's working ...

[valosharp]

Well, removing elements through html2pdf's data-html2canvas-ignore or by using htlm2canvas ignoreElements predicate results in an incorrect page breaks. Page breaks do apply, but content that is supposed to be rendered on the next page is rendered on the same page, it shift up from the next page. This is the document when hidden content is not ignored: Content with hidden element.pdf And this is the one where the hidden element is ignored. Notice how the elements shift up to the previous page. Content without hidden element.pdf

[dennybiasiolli]

My workaround (without jQuery):

/** before printing **/
const originalStyles = [];
const ignoredElements = document.querySelectorAll('[data-html2canvas-ignore]');
// saving original style.display
ignoredElements.forEach(el => {
  originalStyles.push(el.style.display);
  el.style.display = 'none';
});

/** after printing **/
// restoring original style.display
ignoredElements.forEach((el, i) => {
  el.style.display = originalStyles[i];
});

[henok-tesfaye]

thanks @dennybiasiolli , but do we need originalStyles.push(el.style.display); on restore part? Looks it's not useful.

[dennybiasiolli]

@henok-tesfaye oh you are right, let me fix the code above, thanks!