使用 html-pdf 库从 express-handlebars 渲染生成 pdf 文件，css 文件不起作用答案

【问题标题】：Generating pdf file from express-handlebars render with html-pdf library, css files not working使用 html-pdf 库从 express-handlebars 渲染生成 pdf 文件，css 文件不起作用
【发布时间】：2018-12-20 17:37:18
【问题描述】：

我正在尝试生成一个由 express-handlebars 渲染生成的 pdf 文件。但是，某些 css 文件似乎无法正常工作。

Bootstrap 仍然可以正常工作，但自定义 css（我正在使用主题）无法正常工作。我尝试了 phantomjs config (--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 文件的调用：

Imgur

预期结果：

Imgur

实际结果：

Imgur

如您所见，bootstrap 和 font-awesome 工作正常，但“style.css”不起作用。有人对这个问题有任何想法吗？非常感谢！

【问题讨论】：

标签： handlebars.js pdf-generation express-handlebars html-pdf node-html-pdf

【解决方案1】：

您的服务器代码只读取 HTML 文件而不是 css 文件，因此实际上没有使用 css，使用内联 css。我也在寻找方法来编写单独的 HTML 和 CSS 并合并为 pdf。

【讨论】：

我所做的是我写了然后我读取了 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);
完全正确。复制引导 css 源并将其放在下 head 和 viola!