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

Answer 1

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

Answer 2

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

Answer 3

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