How to Generate Multipage PDF using Single Canvas of HTML Document using jsPDF?

I am trying to create a multi page pdf. Currently all i am getting back is a blank pdf.
I found this function @ https://www.freakyjolly.com/jspdf-multipage-example-generate-multipage-pdf-using-single-canvas-of-html-document-using-jspdf/ and i changed a few things so it would run in angular 8 with out jquery.

@ViewChild('screen',  {static: false}) screen: ElementRef;

     getPDF() {

         const HTML_Width = this.screen.nativeElement.width;
         const HTML_Height = this.screen.nativeElement.height;
         const top_left_margin = 15;
         const PDF_Width = HTML_Width + (top_left_margin * 2);
         const PDF_Height = (PDF_Width * 1.5 ) + (top_left_margin * 2);
         const canvas_image_width = HTML_Width;
         const canvas_image_height = HTML_Height;

         const totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;


         html2canvas(this.screen.nativeElement).then(canvas => {
              canvas.getContext('2d');

              console.log(canvas.height + '  ' + canvas.width);


              const imgData = canvas.toDataURL('image/jpeg', 1.0);

              const pdf = new jspdf('p', 'pt',  [PDF_Width, PDF_Height]);
              pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);


              for (let i = 1; i <= totalPDFPages; i++) {
                  pdf.addPage(PDF_Width, PDF_Height);
                  pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i ) + (top_left_margin * 4 ), canvas_image_width, canvas_image_height);
              }

               pdf.save('HTML-Document.pdf');
          });
     }

Leave a Reply

avatar
  Subscribe  
Notify of