jsPDF can't get any styling to work

Question

I\'m new to using jsPDF but and for the life of me I can\'t get any css to apply to this thing! I\'ve tried inline, internal, and external all to no avail! I read in another

Answer 1

@samuraiseoul We can do complex HTML rendering with domtoimage

private async generatePDF(elemToPrint: HTMLElement): Promise {
 this.printSection = document.createElement('div');
 this.printSection.id = 'printSection';
 document.body.appendChild(this.printSection);
 const dataUrl = await domtoimage.toPng(elemToPrint, {width: elemToPrint.clientWidth, height: elemToPrint.clientHeight});
 const img = document.createElement('img');
 img.src = dataUrl;
 img.alt = 'The Image';
 this.printSection.appendChild(img);
 setTimeout(() => window.print(), 500); //Just give some time to render stuff while playing with @media print css stuff  
}

Here is with the CSS

@media screen {
 #printSection { 
  display: none;
 }
}
@media print {
  #printSection , #printSection *{
   display: block; // We need the * because only if we display all the items inside the printSection to display as block. then only our mighty firefox will render the second page. :) Hey, that's a bug from FF.
  }
}