How to print full screen using jspdf and html2canvas

Question

DEMO

Hi i am using Angular8 in my application. Here i have used jspdf and html2canvas for converting html to pdf. But i am able to print only half page not the full page. Can anyone help me where i am going wrong.

I have attached an demo, when i select any value in dropdown, one more div opens, so i need to get full values what are all present in the div section. Please help. i am getting output like this, but it doesnt contain full values as per expectation:

Output

If there is any other approach which gives output as my requirement is also accepted.

TS:

 public downloadPdf() {
    var data = document.getElementById('pdfDownload');
    html2canvas(data).then(canvas => {
      // Few necessary setting options
      var imgWidth = 208;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      alert(imgHeight)
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
      var position = 0;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      //  pdf.save('new-file.pdf');
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    });
 
  }

Ketti

Answer 1

For this, you have to add options in html2canvas method scrollY {scrollY: -window.scrollY} it will take the screenshot of the fully rendered page.

html2canvas(data, {scrollY: -window.scrollY, scale: 1}

Apart from this as we know we have data present in the scroll bar. For this, you have to remove scroll temporarily and need to add after pdf generate. You can do this by simply adding id to this <ul class="list-group list-group-flush vert-scrollable-150" id="alldata"> element.

// coded for disabling the scroll

document.getElementById('alldata').style.overflow = 'inherit'; document.getElementById('alldata').style.maxHeight = 'inherit';

      async downloadPdf() {
    var data = document.getElementById('pdfDownload');
    $('pdfOpenHide').attr('hidden', true);
    // disable the scroll
     document.getElementById('alldata').style.overflow = 'inherit';
     document.getElementById('alldata').style.maxHeight = 'inherit';

   await  html2canvas(data, {scrollY: -window.scrollY, 
   scale: 1}).then(canvas => {
      // Few necessary setting options
      var imgWidth = 150;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      const contentDataURL = canvas.toDataURL('image/png', 1.0)
// enabling the scroll 
      document.getElementById('alldata').style.overflow = 'scroll';
        document.getElementById('alldata').style.maxHeight = '150px';

      let pdf = new jspdf('l', 'mm','a4'); // A4 size page of PDF
      var position = 0;
   // add tghis width height according to your requirement
      const divHeight = data.clientHeight
  const divWidth = data.clientWidth
  const ratio = divHeight / divWidth;

       const width = pdf.internal.pageSize.getWidth();
    let height = pdf.internal.pageSize.getHeight();
        height = ratio * width;
      pdf.addImage(contentDataURL, 'PNG', 0, position, width, height);
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    }); 
}

you can also add a page if data is more in scroll bar using jspdf.

For more reference, you can check this HTML2Canvas does not render full div, only what is visible on screen?

Another Solution: If data is more

   async downloadPdf() {
        var data = document.getElementById("pdfDownload");
        $("pdfOpenHide").attr("hidden", true);
        // To disable the scroll
        document.getElementById("alldata").style.overflow = "inherit";
        document.getElementById("alldata").style.maxHeight = "inherit";
    
        await html2canvas(data, { scrollY: -window.scrollY, scale: 1 }).then(
          canvas => {
            const contentDataURL = canvas.toDataURL("image/png", 1.0);
            // enabling the scroll
            document.getElementById("alldata").style.overflow = "scroll";
            document.getElementById("alldata").style.maxHeight = "150px";
    
            let pdf = new jspdf("l", "mm", "a4"); // A4 size page of PDF
    
            let imgWidth = 300;
            let pageHeight = pdf.internal.pageSize.height;
            let imgHeight = (canvas.height * imgWidth) / canvas.width;
            let heightLeft = imgHeight;
            let position = 0;
    
            pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
    
            while (heightLeft >= 0) {
              position = heightLeft - imgHeight;
              pdf.addPage();
              pdf.addImage(contentDataURL, "PNG", 0, position, imgWidth, imgHeight);
              heightLeft -= pageHeight;
            }
            window.open(
              pdf.output("bloburl", { filename: "new-file.pdf" }),
              "_blank"
            );
          }
        );
      }

Robbyrobbyn

Thanks for the response, but i am not able to get scroll also, full height and width is crossing – Ketti

have doubt need your inputs – Ketti

Yes, please in which thing you are having doubt. @Ketti – Robbyrobbyn

is it possible to make the image to come in pages, i mean if the data is like 70 items can the page be splitted? – Ketti

also, in one machine il be able to see 47 records, where as in other pc il be able to see only 43 – Ketti

yes, it is possible. which approach are you using currently html2canvas or addHTML method? – Robbyrobbyn

Currently using what you have given in answer, when i used addHTML approach, there was changes in css, so took html2canvas approach – Ketti

Hi, @Ketti I have updated the second solution. In this, it will print data to another page if there are more record. – Robbyrobbyn

Thanks for response Sunny, but this is breaking, the data is getting cut to half, il not be able to see 10 records and pages come as empty at end. – Ketti

Answer 2

Instead of creating pdf from image, directly create pdf from html using addHtml method of jspdf. this is resolved your issue. I have created below code use it.

You have to add this script in header section in index page

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

public downloadPdf() {
$("pdfOpenHide").attr("hidden", true);
var removeClass = document.getElementsByClassName("vert-scrollable-150");
removeClass[0].classList.add("RemoveThisClass");
removeClass[0].classList.remove("vert-scrollable-150");

var data = document.getElementById("pdfDownload");
const pdf = new jspdf("p", "pt", "a4");
pdf.addHTML(data, () => {
  window.open(
    pdf.output("bloburl", { filename: "new-file.pdf" }),
    "_blank"
  );
});
var addClass = document.getElementsByClassName("RemoveThisClass");
addClass[0].classList.add("vert-scrollable-150");
addClass[0].classList.remove("RemoveThisClass"); 

}

It will work for you. also you can take reference from htmltopdf converter

Tuscarora

Answer 3

Try this:

public downloadPdf() {
    var data = document.getElementById('pdfDownload');
    html2canvas(data, { useCORS:true}) // useCORS is optional if your images are externally hosted somewhere like s3
    .then(canvas => {
      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jspdf('p', 'pt', [canvas.width, canvas.height]);
      var pdfWidth = pdf.internal.pageSize.getWidth();
      var pdfHeight = pdf.internal.pageSize.getHeight();
      pdf.addImage(contentDataURL, 'PNG', 0, pdfWidth, pdfHeight);
      //  pdf.save('new-file.pdf');
      window.open(pdf.output('bloburl', { filename: 'new-file.pdf' }), '_blank');
    });
 
  }

Knock

this works for me, Please update the arguments that are being passed to jspdf and addImage. addImage takes x and y co-ordinates you are only passing 0 for x, this throws an exception. – Dachshund