HTML2Canvas generating blank image in Ionic4 angular proj. No error in console. Same code generates proper image in plain html/javascript

Question

I have html2canvas installed and imported in home.page.ts in my Ionic4 angular test project. I have a plain 100px X 100px, yellow background div with a single line of text.

Answer 1

https://www.npmjs.com/package/dom-to->image works better than html2canvas https://www.npmjs.com/package/jspdf ->if you need to save to pdf

page.ts

import * as jsPDF from 'jspdf'; 
import domtoimage from 'dom-to-image';

captureScreen() {
  const div = document.getElementById('pdfContent');
  const divHeight = div.clientHeight;
  const divWidth = div.clientWidth;
  const options = { background: 'white', width: divWidth, height: divHeight };

  domtoimage.toPng(div, options).then((imgData) => {
    const doc = new jsPDF('p', 'mm', [divWidth, divHeight]);
    const imgProps = doc.getImageProperties(imgData);
    const pdfWidth = doc.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    doc.save('pdfDocument.pdf');
  });

page.html

<ion-button (click)="captureScreen('pdfContent')">
  <ion-icon name="print" size='small' slot="icon-only"></ion-icon>
</ion-button>

<div id="pdfContent">
  <h1>Testing this to pdf</h1>
</div>

worked on ionic 5 (see more here image-in-ionic4-angular)

Note: current version of jsPDF is giving errors. This is npm install jspdf@1.5.3 --save working ok

You can see the example here of the site:

and of the generated pdf