生成 PDF 时未找到车把链接的 CSS

Question

所以我正在尝试使用 Puppeteer 和 Handlebars 生成 PDF。我通过设置新页面的内容然后使用 Puppeteer 生成 PDF 来做到这一点。但是我正在努力让 CSS 链接。我已经尝试在一个简化的项目中使用以下代码来让它使用 express 工作：

const puppeteer = require('puppeteer');
const path = require("path");
const fs = require("fs");
const handlebars = require("handlebars");
var express = require("express");
var hbs = require("express-handlebars");

var app = express();

app.engine('hbs', hbs({ extname: 'hbs' }));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'public')));

(async () => {
    let browser = null;

    const file = fs.readFileSync('./templates/template.hbs', 'utf8');
    const template = handlebars.compile(file);
    const html = template({});

    browser = await puppeteer.launch({
        headless: false,
        devtools: true
    });

    const page = await browser.newPage();

    await page.setContent(html);
})();

这是我的项目结构的样子：

但是，在设置页面内容时，我似乎无法显示我的 CSS。我已经学习了很多教程，但我也不确定它们是否适用于我正在尝试做的事情？

Answer 1

最终对我有用的是使用 Puppeteers 内置函数来设置页面的样式：

await page.addStyleTag({ path: './public/css/style.css'});

这意味着我也可以摆脱所有快速代码。所以我的最终工作代码如下所示：

const puppeteer = require('puppeteer');
const fs = require("fs");
const handlebars = require("handlebars");

(async () => {
    let browser = null;

    const file = fs.readFileSync('./templates/template.hbs', 'utf8');
    const template = handlebars.compile(file);
    const html = template({});

    browser = await puppeteer.launch({
        headless: false,
        devtools: true
    });

    const page = await browser.newPage();

    await page.setContent(html);
    await page.addStyleTag({ path: './public/css/style.css'});
})();

您可能需要使用path，但就像我需要在我的主项目中获得正确的 CSS 路径一样。像这样：

await page.addStyleTag({ path: path.join(__dirname, '/public/css/style.css') });