Currently, I have Phantom running on a Node server to generate pages from data and render them as PDFs.
Despite the pages rendering correctly as PDFs, I am facing an issue where the external CSS file is not being taken into account.
Below is a simplified version of my setup:
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}});
(I have included three different CSS references to ensure I am not missing the CSS due to a basic relative path syntax issue)
Here is the CSS content:
.myClass { color: blue; }
The PDF gets rendered in the same folder as my server, where the CSS is also located.
While everything else in the PDF displays correctly, the text specified in CSS is not appearing as blue as expected.
Although I could manually style the div, the CSS being used is extensive and I prefer accessing it directly.
Any suggestions on what might be causing this issue?