首页 > 解决方案 > 节点包“dynamic-html-pdf”未将 CSS 应用于生成的 pdf

问题描述

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));
});

我有这条路线可以渲染车把模板并同时生成模板的pdf。我对生成的 pdf 的问题是没有应用打印 css。

在 hbs 中,我链接了这个 print css 并且链接正在工作。我通过将媒体从打印更改为屏幕来测试它。

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

为了让我将打印 css 应用到 pdf,我需要在 hbs 模板中放置一个带有 @media print{} 的标签,我认为它不整洁。

所以问题是 dynamic-html-pdf 包是否读取打印 css 并且有没有办法以某种方式在模板文件中包含没有样式标记的 css?

标签: htmlcsspdfpdf-generationdynamic-html

解决方案


据我所知,它不接受外部 CSS。我使用内联 CSS。


推荐阅读