Angular Html2Pdf - DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot'

Viewed 197

Implementing html2pdf with Angular 12, converting parts of html page into PDF to download.

CONSOLE ERROR

index-7a8b7a1c.js:150 Uncaught (in promise) DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

HTML

<section id="toPdfContainer">
    <h5 class="card-title">Hello WOrld!</h5>
</section>
<button class="btn btn-primary w-100" (click)="toPdf()">TO PDF</button>

SCRIPT

import * as html2pdf from 'html2pdf.js';

...

public toPdf() {
   const elementToPdf = document.getElementById('toPdfContainer');
   console.log('to PDF', elementToPdf);
   const opt = {
      margin: 1,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
   };
   html2pdf().set(opt).from(elementToPdf).save();
}

can anyone help me with this?

1 Answers

This appears to be a TypeScript "issue". I say "issue" because it's a feature that's added in 4.8.

Note however, that updating to TypeScript 4.8 requires updating Angular to >=14.2.0. Anything before that version isn't compatible with TypeScript 4.8 (you'll get compilation errors regarding decorators).

Related