Question

我正在尝试生成一个由快速车把渲染生成的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”无法正常运行。有人对这个问题有任何想法吗？提前非常感谢！

Answer 1

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

使用html-pdf库从Express-Handlebars Render生成pdf文件，css文件不起作用

1 个答案: