Связанные рули CSS не найдены при создании PDF - PullRequest
Новая
       41

Связанные рули CSS не найдены при создании PDF

0 голосов
/ 17 июня 2020

Итак, я пытаюсь создать PDF-файл с помощью Puppeteer и Handlebars. Я делаю это, устанавливая содержимое новой страницы, а затем использую 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);
})();

Вот как выглядит моя структура проекта:

Folder Structure

Однако я не могу, чтобы мой CSS появлялся при настройке содержимого страницы. Я следил за множеством руководств, но я также не уверен, применимы ли они к тому, что я пытаюсь сделать?

1 Ответ

0 голосов
/ 17 июня 2020

Что в итоге сработало для меня, так это использование встроенной функции Puppeteers для установки стилей для страницы: 

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

Это означает, что я мог также избавиться от всего кода express. Итак, мой окончательный рабочий код выглядел так: 

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