Hyperlinks generated in the wrong location when using a Footer (div on 100vh parent), and changing html2canvas options.windowHeight

[subatomicglue]

I am getting this issue where the height of resulting PDF is 70% what it should be.

configuration:

      let doc_width = 8.27;  // A4 measures 210 × 297 millimeters or 8.27 × 11.69 inches
      let doc_height = 11.69;
      let aspect = doc_height / doc_width;
      let dpi = 96; // default
      let img_width = doc_width * dpi;
      let img_height = doc_height * dpi;
      let win_width = img_width;
      let win_height = img_height;

      // https://html2canvas.hertzen.com/configuration
      let html2canvasOpts = {
        scale: 1
      };

      // https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html
      let jsPDFOpts = {
        orientation: 'portrait',
        unit: 'in',
        format: [doc_width, doc_height]
      };

then using html2pdf.js (npm install --save html2pdf.js 0.9.1 in an Angular 5 app)

      // https://github.com/eKoopmans/html2pdf
      html2pdf().set({
        margin:       [0.00, 0.00, 0.00, 0.00], // [top, left, bottom, right]
        filename:     'html2pdf.pdf',
        image:        { type: 'jpeg', quality: 0.96 },
        html2canvas:  html2canvasOpts,
        jsPDF:        jsPDFOpts,
        enableLinks:  true,
      }).from( document.getElementById('dom-to-print') ).save();

1st Problem: Results in virtual window height around 70% what it should be:
html2pdf (15).pdf

If I tweak the windowHeight (which seems like a HACK, but ok, let's try it).

      // https://html2canvas.hertzen.com/configuration
      let html2canvasOpts = {
        scale: 1,
        windowHeight: win_height - 3, // minus 3 to avoid "ERROR Error: Uncaught (in promise): Error: addImage does not support files of type 'UNKNOWN', please ensure that a plugin for 'UNKNOWN' support is added."
      };

2nd Problem: Then it fixes the visual, but totally KEEPS the link's former click area. It would seem that the link rectangles are NOT using the new html2canvasOpts.windowHeight while the canvas render IS.
html2pdf (16).pdf

[subatomicglue]

My html content is like so:

HTML template in Angular5

<h2>Lazy loaded MyLazy2Component, a complex PDF writer!</h2>
  <button (click)="show = true; writePDF();">Write PDF</button>
<div *ngIf="show" id='dom-to-print'>
  <div id='header'>
    <div id='left' style='line-height: 40px;'>Company Summary</div>
    <div id='right'><img src='assets/logo.png'></div>
  </div>
  <div id='body'>
    <H1><img width='25px' src='assets/logo2.png'> Fake Company</H1>
    The quick fox jumped over the brown lazy dog.
    Jack quietly moved up front and seized the big ball of wax.
    Few black taxis drive up major roads on quiet hazy nights.
    Just poets wax boldly as kings and queens march over fuzz.
    Bored? Craving a pub quiz fix? Why, just come to the Royal Oak!
    Quincy Pondexter blocked five jams against the Wizards!
    Crazy Frederick bought many very exquisite opal jewels.
    A quivering Texas zombie fought republic linked jewelry. <a href="http://www.go.to/some/place">http://www.go.to/some/place</a>
    Grumpy wizards make toxic brew for the evil queen and jack.
    The job of waxing linoleum frequently peeves chintzy kids.
    Back in June we delivered oxygen equipment of the same size.
    Just keep examining every low bid quoted for zinc etchings.
    How razorback-jumping frogs can level six piqued gymnasts!
    A quick movement of the enemy will jeopardize six gunboats.
    All questions asked by five watched experts amaze the judge.
    Bobby Klun awarded Jayme sixth place for her very high quiz.
    The wizard quickly jinxed the gnomes before they vaporized.
    Zelda might fix the job growth plans very quickly on Monday.
    Zack Gappow saved the job requirement list for the six boys.
    Jackie will budget for the most expensive zoology equipment.
  </div>
  <div id='body' style='display: flex;'>
    <div id='left'>
      <H1><img width='25px' src='assets/logo2.png'> Things They Do</H1>
      The quick fox jumped over the brown lazy dog.
      Jack quietly moved up front and seized the big ball of wax.
      Few black taxis drive up major roads on quiet hazy nights.
      Just poets wax boldly as kings and queens march over fuzz.
      Bored? Craving a pub quiz fix? Why, just come to the Royal Oak!
      Quincy Pondexter blocked five jams against the Wizards!
      Crazy Frederick bought many very exquisite opal jewels.
      A quivering Texas zombie fought republic linked jewelry.
      Grumpy wizards make toxic brew for the evil queen and jack.
      The job of waxing linoleum frequently peeves chintzy kids.
      Back in June we delivered oxygen equipment of the same size.
      Just keep examining every low bid quoted for zinc etchings.
      How razorback-jumping frogs can level six piqued gymnasts!
      A quick movement of the enemy will jeopardize six gunboats.
      All questions asked by five watched experts amaze the judge.
      Bobby Klun awarded Jayme sixth place for her very high quiz.
      The wizard quickly jinxed the gnomes before they vaporized.
      Zelda might fix the job growth plans very quickly on Monday.
      Zack Gappow saved the job requirement list for the six boys.
      Jackie will budget for the most expensive zoology equipment.
    </div>
    <div id='right'>
      <H1><img width='25px' src='assets/logo2.png'> Things They Don't</H1>
      The quick fox jumped over the brown lazy dog.
      Jack quietly moved up front and seized the big ball of wax.
      Few black taxis drive up major roads on quiet hazy nights.
      Just poets wax boldly as kings and queens march over fuzz.
      Bored? Craving a pub quiz fix? Why, just come to the Royal Oak!
      Quincy Pondexter blocked five jams against the Wizards!
      Crazy Frederick bought many very exquisite opal jewels.
      A quivering Texas zombie fought republic linked jewelry.
      Grumpy wizards make toxic brew for the evil queen and jack.
      The job of waxing linoleum frequently peeves chintzy kids.
      Back in June we delivered oxygen equipment of the same size.
      Just keep examining every low bid quoted for zinc etchings.
      How razorback-jumping frogs can level six piqued gymnasts!
      A quick movement of the enemy will jeopardize six gunboats.
      All questions asked by five watched experts amaze the judge.
      Bobby Klun awarded Jayme sixth place for her very high quiz.
      The wizard quickly jinxed the gnomes before they vaporized.
      Zelda might fix the job growth plans very quickly on Monday.
      Zack Gappow saved the job requirement list for the six boys.
      Jackie will budget for the most expensive zoology equipment.
    </div>
  </div>
  <div id='footer'>
    <div id='left'>
      <div><strong>View this in the app</strong></div>
      <div><a href="http://www.go.to/some/place">http://www.go.to/some/place</a></div>
    </div>
    <div id='right'>
      <div><strong>Last Updated</strong></div>
      <div>03/13/2020</div>
    </div>
  </div>
</div>

CSS

  button {background-color:#ff0000;color:#ffffff;}
  #dom-to-print {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    color: #000000;
    font-family: Helvetica, Arial, Sans-Serif;
  }
  #header {
    background-color: #5577aa;
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 700;
    height: 4.7rem;
    margin: auto;
    display: flex;
  }
  #left {
    padding: 1rem;
    flex: 0 0 50%;
    vertical-align: middle;
  }
  #right {
    flex: 1;
    padding: 1rem;
    text-align: right;
    vertical-align: middle;
  }
  #header #right img {
    width: 100px;
  }
  #body {
    font-size: 0.8rem;
    font-weight: normal;
    padding: 3rem;
    line-height: 1.5rem;
  }
  h1 {
    border-bottom: 1px solid #333333;
    padding-bottom: 0.7rem;
    font-size: 1.4rem;
  }
  a, a:hover, a:active {
    font-weight: normal;
    color: #333333;
  }
  #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 64px;
    background-color: #dddddd;
    color: #000000;
    font-size: 0.7rem;
  }

[subatomicglue]

Solution found.

Instead of using height: 100vh to dynamically adjust to the page, simply set (hardcode) the pixel width and height by calculating the number of HTML default 96dpi pixels needed for my A4 document (8.27in x 11.69in):

#dom-to-print {
    ...
    width: 793px;
    height: 1121px;
    ...
}

It's a fixed size PDF. No real need to have the height so dynamic. Solves the problem.
And Footer hyperlink works again.

But there is still some problems:

• CSS height: 100vh on the root div doesn't seem to work with html2pdf
• When compensating for the 1st one, windowHeight seems to get ignored somewhere when generating the click area for hyperlinks, when the css has height set to 100vh.