Show fortawesome icons in HTML2Canvas with Angular 10

Question

I am trying to export an html page to pdf using HTML2Canvas (https://html2canvas.hertzen.com/) and PdfMake in an Angular 10 application.

The problem is that the FortAwesome icons doesnt show up in the generated canvas.

Is use my icons as follow in component.html :

<div id="printDiv" class="overview-table-container">
        <table class="table table-striped">
          <thead>
          <tr>
            .
            .
          </tr>
          </thead>
          <tbody>
          <tr>
            .
            <td><fa-icon [icon]="faBolt"></fa-icon></td>
            .
          </tr>
          </tbody>
        </table>
      </div>

And in my component.ts :

  htmltoPDF()
  {

    html2canvas(document.querySelector("#printDiv")).then(canvas => {
      let data = canvas.toDataURL();
      let docDefinition = {
        content: [{
          image: data,
          width: 500,
        }]
      };


      pdfMake.createPdf(docDefinition).download("test.pdf");
    });


  }

I read that the issue might be caused by not adding a font to the canvas but i don't know how to achieve that. Any ideas ?

Thank you.

Answer 1

It was something about the height and width of the svg elements, causing they did not appear. Added the follow peace of code before the canvas processing.

let svgElements = document.body.querySelectorAll('svg');
    svgElements.forEach(function(item) {
      item.setAttribute("width", String(item.getBoundingClientRect().width));
      item.setAttribute("height", String(item.getBoundingClientRect().height));
      item.style.width = null;
      item.style.height= null;
    });