gpt4 book ai didi

css - PhantomJS:在呈现的 pdf 中忽略外部 CSS

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:48 24 4
gpt4 key购买 nike

我正在使用带有 phantom 模块的 nodejs 从 html 生成 pdf。

首先,我读取 html 模板并用数据填充它,然后将其呈现为 pdf。我希望使用 bootstrap css 来设置页面样式,但是在生成的 pdf 文件中会忽略样式。

这是我的javascript代码:

var phantom = require('phantom');

var htmlTemplate;

fs = require('fs')
fs.readFile('template.html', 'utf8', function (err,data) {

var htmlTemplate = populateTemplate(data, body)

phantom.create(function(ph){
ph.createPage(function(page) {

page.set("paperSize", {
format: "A4",
orientation: 'portrait',
margin: '1cm'
});

page.setContent(htmlTemplate, "", function(){
page.render("../userdata/test.pdf", function(){
console.log("page rendered");
ph.exit();
});
});

})
});

});

html 模板(简化)如下所示:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/paper/bootstrap.min.css", rel="stylesheet">
<meta charset="utf-8">
</head>
<body>

<div class="container">
<h1>Title</h1>
<%NAME%>
</div>
</body>
</html>

所有标记都呈现到页面,但没有样式。即使我使用本地 css 文件或在 <style> 中包含样式头部的元素,结果是一样的

最佳答案

如果 一些 应用了 Bootstrap 的样式,但没有应用其他样式,您可以假设它与 Bootstrap CSS 库和打印有冲突。某些类,尤其是 col-md- 等网格类,并不总是能在打印页面上正确缩放或呈现。如果您在打印正确的网格布局时遇到问题,您可以尝试修复这些类。例如:

  • 将每个 col-md-6 替换为 col-xs-6.

Thanks to user Sonam for pointing this out.

我还建议您查看此线程的其余部分,了解如何 create printable Twitter Bootstrap page .

但是,如果未应用任何引导样式,问题的根源可能在加载页面内容和将该页面转换为 .pdf 文档之间的某处。以我的经验,调试 PDF 渲染库总是有点棘手,因为很难看出流程中哪里出错了。您可以尝试以下几种方法:

您可能会在页面加载外部资源(又名 Bootstrap )之前调用 .render()。看看这个关于在 Phantom 中渲染 PDF 的类似问题。解决方案可能是添加超时/延迟以确保已加载页面的外部 CSS。

我应该补充 - 还有一些其他原因可能导致 Phantom.js 呈现的页面无法加载外部资源。确保您已正确设置 Phantom.js,尤其是 localToRemoteUrlAccessEnabled 键。请参阅以下 StackOverflow 问题以供引用:

关于css - PhantomJS:在呈现的 pdf 中忽略外部 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34182550/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com