Node package “dynamic-html-pdf” not applying CSS to generated pdf

Question

app.get('/individual_report/:athlete_id', function(req, res) {
  database.select('*').from('participants').then(data => {
    if (data.length) {
      res.render('individual_report', {
        name: data
      });
      const hbsfile = fs.readFileSync(__dirname + '/../public/views/individual_report.hbs', 'utf8');
      const document = {
        template: hbsfile,
        context: {
          options: {
            dataForPDF: data,
          },
        },
        path: "./test.pdf"
      };
      pdf.create(document, options).then(res => {
        console.log(res)
      }).catch(error => {
        console.error(error)
      });
    } else {
      res.json({
        msg: 'Invalid athlete ID'
      });
    }
  }).catch(err => res.sendStatus(400));
});

I have this route that renders a handlebars template and generate a pdf of the template at the same time. The issue that I have with the generated pdf is there is no print css applied to it.

In the hbs, I linked this print css and the linking is working. I tested it by changing the media from print to screen.

<link rel="stylesheet" href="/../static/assets/css/style_print_individual_report.css" type="text/css" media="print" />

In order for me to apply the print css to the pdf, I will need to put a tag with @media print{} in the hbs template which I don't think it is neat.

So the question is does the dynamic-html-pdf package read print css and is there a way to somehow include the css without the style tag in the template file?

Answer 1

As much as I can tell, it doesn't accept external CSS. I used inline CSS.