node.js - 生成 PDF 时未找到车把链接的 CSS
问题描述
所以我正在尝试使用 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 出现。我已经学习了很多教程,但我也不确定它们是否适用于我正在尝试做的事情?
解决方案
最终对我有用的是使用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') });