html2Canvas/jsPDF only converts the data in the viewport to pdf?

Ionic Framework ionic-v3
1

I am trying to use the html2Canvas to convert html content to pdf. I have one consent form which is long and we have to scroll like below.

enter image description here enter image description here

I have written below code to convert the consent form into pdf and later show it in a separate screen.

let htmlGrid = document.getElementById('customContent');
const options = {background: "white", height: htmlGrid.clientHeight, width: htmlGrid.clientWidth};
html2canvas(htmlGrid, options).then((canvas) => {
let doc = new jsPDF("p", "mm", "a4");
let imgData = canvas.toDataURL("image/PNG");
//Add image Canvas to PDF
doc.addImage(imgData, 'PNG', 0, 0);
let pdfData = doc.output('datauristring');

But, the problem is that it is converting only the portions of the form which is in view port.
enter image description here

The portion is getting chopped off which is not in the viewport.

I tried to add below line before converting to pdf but it worked only for browser.

htmlGrid.style.height = "auto";

It did work for browser but it did not work for android which is a small screen compared to browser.

Is there anything missing the configuration while converting to pdf?

Thanks in advance.

2

@setu1421 Did you found a solution ?

I tried to

import * as jspdf from ‘jspdf’;

but it gives an error

Cannot use ‘new’ with an expression whose type lacks a call or construct signature.

  const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF

How are you using?