html-pdf库中CSS样式不生效问题求助

问题描述 #

以下代码实现了生成捐赠收据PDF的功能，PDF可成功保存，但生成的PDF未按模板中定义的CSS样式渲染。已尝试调整pdfOptions中的各项配置，仍无法得到预期输出。

donationReceipt = async (req) => {
  try {
    const { id } = req.query;

    let donationReceipt = await TblmanualDonation.findOne({
      where: {
        id : id
      },
      include: {
        model : TblmanualDonationItem, as:"manualItemDetails", attributes: ['type', 'remark', 'amount']
      },
      attributes : ["id", [literal('DATE(donation_date)'), 'donation_date'], "ReceiptNo", "phoneNo", "name", "address"],
      raw: true,
      nest: true
    });

    const filePath = path.join(__dirname, '../public/uploads/', 'Receipt.ejs');
    console.log(filePath);
    const pdfOptions = {
      format: 'A3',
      printBackground: true,
    };
    const toWords = new ToWords({
      localeCode: 'hi-IN',
    });
    const amount = toWords.convert(donationReceipt.manualItemDetails.amount);
    const template = await ejs.renderFile(filePath, {
      donationReceipt: donationReceipt,
      amount: amount
    });
    const filename = path.join(__dirname, `../public/uploads/pdf/${id}.pdf`);
    console.log(filename)
    pdf.create(template, pdfOptions).toFile(filename, function(err) {
      if (err) {
        console.log(err);
      }
      console.log("Pdf send successfully");
    }); 
    return donationReceipt;
  } catch (error) {
      throw error
  }
};

解决方案 #

• 强制使用内联CSS：多数HTML转PDF工具（比如你当前用的html-pdf）对外部/内部样式表支持有限，优先把所有样式直接内联到HTML元素上，或者在EJS模板的<head>中用<style>标签写入完整样式，避免使用外部.css文件引用。
• 验证printBackground参数有效性：确认你使用的PDF库版本是否正确支持该参数，部分旧版本可能需要用background参数替代，或者检查参数是否被正确传递到底层渲染器。
• 修复样式路径问题：如果模板中引用了本地CSS文件，渲染后的HTML可能因PDF生成工具的工作目录与项目目录不一致而无法加载样式。可以读取CSS文件内容直接嵌入模板的<style>标签，比如在EJS中通过fs.readFileSync加载CSS内容。
• 切换到Puppeteer：若上述方法均无效，建议替换为Puppeteer——它基于Chrome内核，能完美支持现代CSS特性。示例替换代码如下：

  const puppeteer = require('puppeteer');
  
  // 保留原有数据查询、模板渲染逻辑，替换pdf.create部分
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(template);
  await page.pdf({
    path: filename,
    format: 'A3',
    printBackground: true
  });
  await browser.close();
  

内容的提问来源于stack exchange，提问作者Lokendra Kumar