Создание pdf-файла из рендеринга экспресс-рулей с библиотекой html-pdf, файлы css не работают

Я пытаюсь создать файл PDF, созданный на основе рендеринга экспресс-рулей. Однако некоторые файлы css не работают.

Bootstrap все еще работает нормально, но пользовательский css (я использую тему) не работает. Я пробовал конфигурацию phantomjs (--web-security = false,...), переключая каталог папки css с локального на сервер. Но ни один из них, кажется, не работает. Изображения работают нормально.

генерация html и создание pdf файлов

var config = {
        format: "A4",
        orientation: "landscape",
        base: "http://127.0.0.1:3002/uploads/theme/",
        timeout: 100000, 
        phantomArgs: ["--web-security=false","--local-to-remote-url-access=true"]
    }

    var html = await hbs.render('./views/pdf.handlebars', data)
    await fs.writeFile("pdf.html", html, function(err) {
        if(err) {
            return console.log(err);
        }
    })
    var fileName = uuid.v4()
    await pdf.create(html, config).toFile(`./downloads/${fileName}.pdf`, function (err, res) {
        if (err) return console.log(err);
        response.send({ success: true, data: { downloadURL: fileName } })

включая css-файлы:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">

сервер, принимающий вызовы из файлов css:

Имгур

Ожидаемые результаты:

Имгур

Фактический результат:

Имгур

Как видите, bootstrap и font-awesome работают нормально, но «style.css» не работает. Кто-нибудь знает об этой проблеме? Спасибо заранее!


person hrtlkr29    schedule 20.12.2018    source источник


Ответы (1)


Код вашего сервера читает только файлы HTML, а не файлы css , поэтому на самом деле css не используется, используйте встроенный css. Я также ищу методы для написания отдельных HTML и CSS и объединения для формирования PDF.

person Pranav Kapoor    schedule 27.11.2019
comment
что я сделал, так это написал ‹style› свой css ‹/style›, затем я прочитал HTML и CSS и объединил файлы. let tempHTML = fs.readFileSync(index.html); let tempCss = fs.readFileSync(index.css') dataSrc = tempCss.toString() + tempHTML.toString() let template = Handlebars.compile(dataSrc); let resultTemp = template(data); - person Pranav Kapoor; 27.11.2019
comment
в яблочко. скопируйте исходный код bootstrap css и поместите его внутрь ‹style type=text/css rel=stylesheet media=all› ‹/style› под заголовком и альт! - person Caner Çakmak; 15.08.2020