1

我正在尝试生成一个从 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 文件的调用：

伊姆古尔

预期结果：

伊姆古尔

实际结果：

伊姆古尔

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

4

1 回答 1

1

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

于 2019-11-27T07:05:10.600 回答