How to print full screen using jspdf and html2canvas

Question

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');
    });
 
  }

Sunny · Accepted Answer · 2020-09-03T02:23:28.980

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"
            );
          }
        );
      }

Thanks for the response, but i am not able to get scroll also, full height and width is crossing — Bhrungarajni, Aug 26 '20 at 13:51
Yes, please in which thing you are having doubt. @Bhrungarajni — Sunny, Sep 01 '20 at 12:19
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? — Bhrungarajni, Sep 01 '20 at 13:28
also, in one machine il be able to see 47 records, where as in other pc il be able to see only 43 — Bhrungarajni, Sep 01 '20 at 13:29
yes, it is possible. which approach are you using currently html2canvas or addHTML method? — Sunny, Sep 01 '20 at 18:51
Currently using what you have given in answer, when i used addHTML approach, there was changes in css, so took html2canvas approach — Bhrungarajni, Sep 02 '20 at 04:19
Hi, @Bhrungarajni I have updated the second solution. In this, it will print data to another page if there are more record. — Sunny, Sep 03 '20 at 02:24
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. — Bhrungarajni, Sep 03 '20 at 12:44

Hitesh Kansagara · Answer 2 · 2020-08-31T11:37:10.920

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

score 2 · Answer 3 · answered Mar 23 '22 at 06:13

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');
    });
 
  }

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. — Nabeel Hussain Shah, Dec 01 '22 at 16:19

How to print full screen using jspdf and html2canvas

3 Answers3