在PhantomJS页面上未考虑外部CSS [英] External CSS not taken into account on PhantomJS page
问题描述
我正在节点服务器上运行Phantom，以便从数据生成页面，然后将其呈现为pdf.
I am running Phantom on a Node server, in order to generate pages from data and then render it as pdf.
但是，尽管页面可以正常工作并正确地以pdf格式呈现，但我无法让它们考虑外部CSS文件.
However, while the pages work and are correctly rendered as pdf and everything, I cannot get them to take into account an external CSS file.
这是我要执行的操作的简化版本:
Here is a simplified version of what I am trying to do:
var phantom = require ('phantom');
phantom.create(function (ph) {
ph.createPage(function (page) {
var content = "";
content += '<html><head>';
content += '<link rel="stylesheet" href="/temp.css">';
content += '<link rel="stylesheet" href="./temp.css">';
content += '<link rel="stylesheet" href="temp.css">';
content += '</head><body>';
content += '<div class="myClass">I am supposed to be blue</div>';
content += '</body></html>';
page.set('content', content);
setTimeout(function(){
page.render("MyRenderedPDF.pdf", {format: 'pdf', quality: '100'});
}, 1000)});
}, {dnodeOpts: {weak: false}});
(我放置了三个CSS引用，以确保由于基本的相对路径语法问题，我不会错过CSS)
(I put the three CSS references to make SURE I didn't miss my CSS due to a basic relative path syntax issue)
和CSS:
.myClass { color: blue; }
PDF呈现在我的服务器所在的文件夹中.我的CSS位于同一文件夹中.
The PDF is rendered in the folder where my server is located. My CSS is located in the same folder.
所有内容都能正确显示在PDF中-但文本不是蓝色.
Everything displays correctly in the PDF - but the text isn't blue.
我知道我可以将样式值强制放入div中，但是我们使用的CSS相当广泛，我宁愿找到一种直接访问它们的方法.
I am aware I could just force a style value into the div, but the CSS we are using are pretty extensive, and I would rather find a way to access them directly.
对我所缺少的东西有什么想法吗?
Any idea on what I am missing?
推荐答案
page.set('content', content);(或普通PhantomJS中的page.content = content)可以直接设置页面内容.当您这样做时，页面在其中评估的域是"about:blank".根本没有资源"about:blank/temp.css".
page.set('content', content); (or page.content = content in plain PhantomJS) is there to directly set the content of the page. When you do that, the domain the page is evaluated in is "about:blank". The resource "about:blank/temp.css" is simply not there.
我在这里看到两个用例.
I see two use cases here.
要么指定您要从中加载资源的完整URL，要么
Either specify the full URL you want to load the resource from
content += '<link rel="stylesheet" href="http://example.com/path/temp.css">';
// OR
content += '<link rel="stylesheet" href="http://localhost/path/temp.css">';
或使用 page.setContent(html, url) 设置域:
or set the domain with page.setContent(html, url):
page.setContent(content, "http://localhost/path/", function(){
page.render("MyRenderedPDF.pdf", {format: 'pdf', quality: '100'}, function(){
ph.exit();
});
});
不要忘记回调，因为phantom模块不同于普通的PhantomJS脚本.有关更多信息，请参见功能详细信息.
Don't forget the callbacks, because the phantom module is different from plain PhantomJS scripts. See Functional Details for more information.
您必须使用 fs 模块读取文件内容并将其作为嵌入式样式表.
You would have to use the fs module to read the file contents and put them as an embedded stylesheet.
content += '<style>' + fs.readFileSync("./temp.css") + '</style';
这篇关于在PhantomJS页面上未考虑外部CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
