html2pdf failed with too many pages

[CSENoni]

Hi @eKoopmans,

Firstly, I want to thank you for writing this great file. It saves me a lot of time dealing with the quality of content and layout. Recently, I was playing around with this file and vue js and found an issue:

https://jsfiddle.net/rover1234/woa5ucyx/

In two tests in the link, I created a simple for loop which shows 5 texts on the screen, and it is fine to output to a pdf file with 5 pages which show these texts since I apply your page break. However, in the second test, it failed to show the content of more than 20 texts which are all blank pages even though the page break still works fine.

I am not sure about this case. Is it because the picture generated from canvas is too large? and how could I find a way to get away from it (like creates multiple elements to generate different pdf content and combine everything into one file)?

Thanks

[CSENoni]

It seems to me that everytime I increase the number of the height of the margin, I could get more pdf pages with the text. On the other hand, when I decrease the height, there are blank pages with the same amount of contexts I generated. Increasing the height is not a solution for me since if there are more pages generated, it will still fail at some point.

https://jsfiddle.net/rover1234/woa5ucyx/

[eKoopmans]

Hi @CSENoni, sorry I didn't respond sooner. Yes, I see the problem. I've reproduced it here using only html2canvas, which html2pdf relies on.

The problem is in fact deeper than that - it's a problem directly in how canvases work. Canvases have a maximum height/width, and once you exceed that the canvas becomes unusable! That's what's happening here.

I wasn't aware of that problem, so thank you for bringing it up. It's a serious limitation and I don't have any immediate solution. As you mentioned, changing the margins and page size will change how many pages you can get (also changing the resolution/scale), but that's just because it changes the size of the underlying canvas.

[MaNuGitH]

Thanks for your answer.
My workaround : changed html2canvas dpi option from 192 to 96

[rb0urd0n]

Hi @eKoopmans

I don't know well html2pdf underlying technologies, but will it be possible to use a second canvas once the limitation is reached on the first one and then merge canvas or PDF?

The cool workaround of @MaNuGitH works fine, but it just to postpone the problem, principally if the content of your PDF is dynamic.

Hope it can help :)

BR

[GGross5213]

I ran this problem as well and @MaNuGitH's workaround didn't work for me. I wrote a function that might be helpful for someone. Lucky for me the new branch new-api exposes more functions and breaks the process of turning html into a pdf into several steps. I notice that I can output my html as an image created from being drawn onto a canvas which is pretty much the last step before turning it into a PDF. So, I decided to create my own instance of jsPDF and only pass in a page at a time to html2pdf. Then I add the image created by html2pdf to my instance of jsPDF. I hope this is helpful.

import html2pdf from 'html2pdf.js';
import jsPDF from 'jspdf';

const exportHTMLToPDF = async (pages, outputType='blob') => {
  const opt = {
    margin:       [0,0],
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { dpi: 192, letterRendering: true },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };
  const doc = new jsPDF(opt.jsPDF);
  const pageSize = jsPDF.getPageSize(opt.jsPDF);
  for(let i = 0; i < pages.length; i++){
    const page = pages[i];
    const pageImage = await html2pdf().from(page).set(opt).outputImg();
    if(i != 0) {
      doc.addPage();
    }
    doc.addImage(pageImage.src, 'jpeg', opt.margin[0], opt.margin[1], pageSize.width, pageSize.height);
  }
  // This can be whatever output you want. I prefer blob. 
  const pdf = doc.output(outputType);
  return pdf;
}

You can also write it using recursion if you can't use async-await.

[nevergiveup777]

Hi @GGross5213 ,

I am still learning JS and I am running into the same problem and I was wondering how can I implement your workaround in my case.

Currently, I have a dynamic content and I am using @eKoopmans plugin to generate a PDF report for it.

So this is my current function:

$("#download").click(function(){
filename = this.value + '.pdf'
var element = document.getElementById('report');

html2pdf(element, {
		margin:       0.25,
		filename:     filename,
		image:        { type: 'jpeg', quality: 0.98 },
		html2canvas:  { dpi: 96, letterRendering: true },
		jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
	  });

});

and I would like to know where should I put my "element" variable into your function in order to have it working?

I would much appreciate if you could give me hand with it.

[GGross5213]

@nevergiveup777 Does your element have the html2pdf page-break classes in it?

The way I did it was by breaking my element up into the pages that I wanted, and then passing only one page at a time into html2pdf. Then I convert that page into an image using html2pdf and add it to an instance of jsPDF that I control (what html2pdf does underneath the hood). I would also recommend using the new-api branch of html2pdf has it exposes an outputImg function. I guess you could implement it using the callback branch, but it will be much easier with the new-api. I hope this helps.

[waqar-imtiaz]

@GGross5213 in your example I got error jsPDF.getPageSize is not a function. and pages arg is the html element that we are going to export, right? I have very large tables and images that i needed to convert into pdf but as you know if goes blank.

[GGross5213]

@waqar-imtiaz The pages arg is a list containing strings of HTML. In my case each element in the list is a single page that is ended with the </div><div class="html2pdf__page-break"></div>. Can you post the code where you are calling jsPDF.getPageSize()? Also what format are your images in? I know I had problems with images showing up in the PDF. If they were coming from an external url such as AWS S3, they wouldn't render. I think it has something to do with CORS. I couldn't figure out how to allow CORS/set up a proxy. So, I just converted them into base64 data URI's and included those.

[waqar-imtiaz]

@GGross5213 My HTML is as follow:

<!-- pdf-export div starts from here -->
<div id="pdf-export" >
            <div class="cover-page">
              <h1>True Monitor Report</h1>
              <h2>{{monitorName}}</h2>
              <ul class="monitor-details">
                <li>PDF Created Date:<span class="pull-right"> {{currentDate}}</span></li>
                <li>Last Run:<span class="pull-right">{{getDateTime(monitorDetails.lastRun)}}</span></li>
                <li>Search Sources:
                  <span class="pull-right">
                    <i *ngIf="monitorDetails.facebookSource">Facebook,</i>
                    <i *ngIf="monitorDetails.twitterSource"> Twitter,</i>
                    <i *ngIf="monitorDetails.googleSource"> Google,</i>
                    <i *ngIf="monitorDetails.youtubeSource"> YouTube,</i>
                    <i *ngIf="monitorDetails.instagramSource"> Instagram,</i>
                    <i *ngIf="monitorDetails.documentSource"> Documents</i>
                  </span>
                </li>
                <li>Search Terms:<span class="pull-right"><i *ngFor="let term of monitorDetails.searchTerms">{{term}},</i></span></li>
                <li>Result Counts:<span class="pull-right">{{totalMonitorResultsCount.counts}}</span></li>
              </ul>
            </div>
            <div class="html2pdf__page-break"></div>
              <div id="images" class="clearfix" style="clear: both; width: 100%">
                <h2>{{monitorName}}</h2>
                <!-- images come here and I add page breaks after six images  -->

              </div>
             <table>
                <!--here comes the table, data for this table comes from the data base and it can be
 thousands of rows, so I can not add page breaks here in the table (or maybe there is someway around). 
so when I generate pdf using html2pdf pdf goes blank even if the data is just about 400 rows only, I tried
 to use fromhtml method of jspdf but I could not make the desired layout of images, if you can help me
 that would be great. thanks. :)  -->
            </table>


                 
          </div>

and js code is:
` var pages = document.getElementById('pdf-export')
const exportHTMLToPDF = async (pages, outputType='blob') => {
console.log('checking now the pdf');
const opt = {
margin: [0,0],
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
};
const doc = new jsPDF(opt.jsPDF);
const pageSize = jsPDF.getPageSize(opt.jsPDF);
for(let i = 0; i < pages.length; i++){
const page = pages[i];
const pageImage = await html2pdf().from(page).set(opt).outputImg();
if(i != 0) {
doc.addPage();
}
doc.addImage(pageImage.src, 'jpeg', opt.margin[0], opt.margin[1], pageSize.width, pageSize.height);
}
// This can be whatever output you want. I prefer blob.
const pdf = doc.output(outputType);
return pdf;
}

                  exportHTMLToPDF(element, 'outputPdf')`

PS: I think my knowledge of js is very limited, sorry in advance if this is wrong in any way.

[audra415]

Hi @GGross5213,

How do you create the array of pages that you pass to the exportHTMLToPDF function?

Thanks