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

问题

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.

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.

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.

回答1:

  loadPDF() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('mybarchart')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save(`test.pdf`);
  document.getElementById("pdfLoader").classList.remove('loader');
  setTimeout(() => {
    window.close();
    }, 2000);
  });
}

来源：https://stackoverflow.com/questions/57886038/html2canvas-jspdf-only-converts-the-data-in-the-viewport-to-pdf

标签

angular

ionic-framework

pdf-generation

jspdf

html2canvas