生成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') });