Angular2 jsPdf生成整个div的pdf

Question

I am trying to generate pdf of my view with jsPdf, which is successful except for the fact that it generates pdf of the part which is in view and not the entire html.

<div style="padding: 1%;">
    <button mdl-button mdl-button-type="raised" (click)="download()">download </button>
</div>

<div class="mdl-grid" id='entireDownload'>

... 
... => here is a big html whose content do not fit in 100vh viewport

</div>

and my component:

  download() {

    //var doc = new jsPDF();
    const elementToPrint = document.getElementById('entireDownload'); //The html element to become a pdf
    const pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML(elementToPrint, () => {
      // Save the PDF
      pdf.save('behavior-variables.pdf');
    });

  }

How can I make sure that my download function generates pdf of the entire div and not just the content which is visible at once?

Answer 1

In theory, you can instantiate your jsPDF object with the desired dimensions. Those dimensions must meet your DIV's ones:

var pdfDoc = new jsPDF('p', 'pt', [divWidth, divHeight]);

But for any reason it doesn't work for me: the Height is always wrong

My work around is to delete the first page and add a new one with the expected dimensions:

var pdfDoc = new jsPDF('p', 'pt', [0, 0]);  //Units 'pt' are important!
pdfDoc.deletePage(1);
pdfDoc.addPage(myDivWidth, myDivHeight);

The 'pt' (points) units will be applied to any new page and it will fit your DIV pixels dimensions