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

you can try this option, that uses jsPDF, html2canvas and html2pdf libraries

from its README:

include this files:

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>

and then you can generate your pdf by running:

html2pdf($('body').get(0), {
   margin:       1,
   filename:     'myfile.pdf',
   image:        { type: 'jpeg', quality: 0.98 },
   html2canvas:  { dpi: 192, letterRendering: true },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
});

Answer 2

@samuraiseoul We can do complex HTML rendering with domtoimage

private async generatePDF(elemToPrint: HTMLElement): Promise<void> {
 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.
  }
}

Answer 3

You can capture a screenshot with jsPDF, but you'll need html2canvas as well. Use html2canvas to convert the html to canvas and grab the image content. Create an empty pdf with jsPDF and add the html image content into the pdf and save:

html2canvas(*html*, {
  onrendered: function(canvas) {
    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jsPDF()
    pdf.addImage(contentDataURL, 'JPEG', 20, 20)
    pdf.save('form.pdf')
  }
})

This will retain all CSS but the quality will suffer a little (blurry).

Answer 4

I think the problem is that you use media="print" instead of media="screen". Try making two seperate files, one for print and one for the screen:

<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>

The screen one will contain the styling for the page as seen in a browser. The print one will contain the styling for when you print your page, or in this case saving it as a PDF.

EDIT

I checked the jsPDF website but I think they don't support CSS. You could do something like this to create a document with different text colors though:

doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');

Put this code right under var doc = new jsPDF('landscape'); in your script.