Jspdf and responsive canvas

Question

I’m generating PDF with jspdf and do the screenshot with the canvas. The form which generates the PDF is very large and generates more than one page. Code:

window.html2canvas = html2canvas; 

function demoFromHTML() { 

const html_source = document.getElementById('employee_detail'); 
const filename = 'PIC.pdf'; 

html2canvas(html_source).then(function(canvas) { 

let imgData = canvas.toDataURL('image/png'); 
let imgWidth = 210; 
let pageHeight = 297; 

let imgHeight = canvas.height * imgWidth / canvas.width; 
let heightLeft = imgHeight; 
let position = 0; 
let pdf = new jsPDF('p', 'mm'); 
let fix_imgWidth = 0;  
let fix_imgHeight = 18;

pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
heightLeft -= pageHeight; 

while (heightLeft >= 0) { 
position = heightLeft - imgHeight; 
pdf.addPage(); 
pdf.addImage(imgData, 'PNG', 0, position, imgWidth + fix_imgWidth, imgHeight + fix_imgHeight); 
heightLeft -= pageHeight; 
} 
pdf.save(filename); 
}) 
}

The problem is that when I file the pdf on the pc, it breaks the page correctly, but when I generate the pdf on my phone it already breaks the page incorrectly. How can I put my code in order to adjust the page break always correct regardless of the screen size?

I leave the link to view the page break on your phone: insert link description here

Here I leave the link of the same pdf on computer: insert link description here

I wanted you to print where to print and adjust the document to the equipment screen automatically.

Answer 1

Possible solution:

• Find the device breakpoint (Device Breakpoints);
• Through the if/else weigh the screen break according to the device.

That is, you have to configure your code according to the width of each screen.

There are tons of screens and devices with different heights and widths, so it’s hard to create an exact breakpoint for each device. To keep things simple, you can target five common groups:

• Extra small Devices (phones, 600px and down)
• Small Devices (Portrait tablets and large phones, 600px and up)
• Medium Devices (Landscape tablets, 768px and up)
• Large Devices (laptops/desktops, 992px and up)
• Extra large Devices (large laptops and desktops, 1200px and up)

Example:

const deviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;

window.html2canvas = html2canvas;

function demoFromHTML() {

  const html_source = document.getElementById('employee_detail');
  const filename = 'PIC.pdf';

  html2canvas(html_source).then(function(canvas) {

    let imgData = canvas.toDataURL('image/png');
    let imgWidth = 210;
    let pageHeight = 297;

    let imgHeight = canvas.height * imgWidth / canvas.width;
    let heightLeft = imgHeight;
    let position = 0;
    let pdf = new jsPDF('p', 'mm');

    let fix_imgWidth = 0; // Padrao
    let fix_imgHeight = 18; // Padrao


    if (deviceWidth < 600) { //  max-width: 600px -  Dispositivos extra pequenos

      fix_imgWidth = 0;
      fix_imgHeight = 18;

    } else if (deviceWidth > 600) { // min-width: 600px - Pequenos dispositivos

      fix_imgWidth = 0;
      fix_imgHeight = 18;

    } else if (deviceWidth > 768) { // min-width: 768px - Dispositivos médios

      fix_imgWidth = 0;
      fix_imgHeight = 18;

    } else if (deviceWidth > 992) { // min-width: 992px  - Dispositivos grandes

      fix_imgWidth = 0;
      fix_imgHeight = 18;

    } else if (deviceWidth > 1200) { // min-width: 1200px - Dispositivos extra grandes

      fix_imgWidth = 0;
      fix_imgHeight = 18;

    }


    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth + fix_imgWidth, imgHeight + fix_imgHeight);
      heightLeft -= pageHeight;
    }
    pdf.save(filename);
  })
}

And obviously the fix_imgHeight and the fix_imgWidth you will adjust according to the screen.