Node-html-pdf: How to use CSS from external files .... ?

[ravisuhag]

Hi
Is there a way i can attach my external stylesheets ...

[marcbachmann]

I believe it should work. Doesn't it?

<link rel="stylesheet" type="text/css" href="file:///absolute/path/to/css/file.css">
<link rel="stylesheet" type="text/css" href="http://example.com/assets/stylesheet.css">

I'll move that into the readme.
I'm curious what you want to use. Did you try to link local or remote files?

[ravisuhag]

Hi... Thanks for response....!
No It is not working. i tried both

Also for finished version i am generating dynamic HTML with HAML template engine so right now in-paging all CSS.... Can't figure out how i can use external CSS file and avoid duplicating the CSS code in every template ...

[marcbachmann]

This works as long as you use the stylesheets in the html string.
pdf.create(html, options, callback)

[marcbachmann]

Have a look at the examples at here

[istian]

@marcbachmann,

I also followed the example but something weird going on my testing. I have two enviroments QA and prod, the pdf creation works well in QA but failing in production. My CSS file is minified in production but if I try and replace QA with the production minified css version, it still worked in QA.

I suspect that it maybe a delay in fetching the external css (via absolute url) and the html page that the pdf creator did not get the full render of html content with css applied to it. But why does it work in my QA server (same html)?

I'm thinking that this maybe on my production server but I couldn't tell where. Is there a debug mode option for the npm package so I can see more details? Can I use phantomjs to see logs or debug?

Thanks

[lfilho]

Hi, this is not working for me too.

    <link rel='stylesheet' type='text/css' href='lib/foundation-5.5.1/css/normalize.css' />
    <link rel='stylesheet' type='text/css' href='css/font-awesome.min.css' />
    <link rel='stylesheet' type='text/css' href='css/main.css' />
    <link rel='stylesheet' type='text/css' href='css/print.css' />

and:

#!/usr/bin/env node
'use strict';

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('./index.html', 'utf8');
var options = { filename: './CV_-_Luiz_Gonzaga_Filho.pdf', format: 'A4' };

pdf.create(html, options).toFile(function(err, res) {
    if (err) { return console.log(err); }
    console.log(res);
});

The pdf is created but with no CSS at all, just the RAW html content.

[inkub8]

@lfilho - I can't tell you the definitive reason, though I suspect it has to do with the fact it's using the headless browser to render your pdf, but you need to use absolute links. So, for example:

<link rel='stylesheet' type='text/css' href='http://www.mysiteurl.com/css/main.css' />

That should fix your issue.

[istian]

i had an issue before and i solved it by specifying the full file path of the css from te server. Absolute url didn't work for me.

[lfilho]

Thanks, @inkub8. Will try that.

That is a shame. My use case is a static page (my cv, done in html + css). So now I would have to:

1. Have a local server as dependency of my project
2. Create a build pipeline, something like:
   
   
   
   1. Prefix my hrefs with http://localhost:8080/
   
   
   2. Build the PDF
   
   
   3. Revert i.
   
   

The 1. wouldn't be much of problem because I'm actually using a local server for live-reloading changes. But of course I don't want to commit files with that href. :)

[inkub8]

@lfilho I use
req.protocol + '://' + req.get('host')

this stops me having to commit fixed hrefs.

[lfilho]

Ha, well thought! Thanks!

[itajaja]

you can use the <base> html tag. works for me :)

[KylePDavis]

Thanks @itajaja, using <base> worked for me.

[marcbachmann]

Now in v2.0.0, there's also a base option, which might help.

[Rahulkr204]

I faced same problem and resolved by creating a server in parent directory and referring css url to base.

[LuisdelaVega]

What if I need to use local files? The solution proposed here (using the <base> tag) doesn't help in that scenario

[vaske]

When I tried to include external URL for css I keep getting error select: Invalid argument, without include of CSS it generate pdf.

[voigtd]

I can confirm that I am also intermittently getting the error select: Invalid argument. I'm loading external google fonts stylesheets, which I found is causing the problem. Loading local stylesheets works. The issue is caused by PhantomJS which is the main dependency of this project. I don't think there is any way to fix this besides building your own HTML to PDF lib with something besides Phantom

[negi-sachin]

I solved this by passing "base" key in options:
Eg:
Putting all static files inside "public" folder and then in app.js:
app.use(express.static("public"));

let options = {
base: "http://localhost:3000", // or use: req.protocol + '://' + req.get('host')
};
pdf.create(html, options).toFile("report.pdf", function (err, data) {
if (err) {
res.send(err);
} else {
res.send("File created successfully");
}
});
}

I can access my static files like :