Create PDF with NodeJS, Jade and PhantomJS - css

Question

I want to create a PDF from a template in Jade using PhantomJS, I can create the PDF document, but the CSS is not applying, I create two routes the first one render the template to the web browser and the second one generate de PDF with the exact same jade template, in the browser all is right, but the PDF don't apply CSS.
My app.js is:
var express = require('express'),
routes = require('./routes'),
http = require('http'),
path = require('path'),
bodyParser = require('body-parser');
var app = express();
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, 'public')));
app.post('/api/cotizacion/generar', routes.cotizacion.generar);
app.get('/api/cotizacion/generar', routes.cotizacion.testGenerar);
app.all('*', function(req, res) {
res.send(404);
});
http.createServer(app).listen(app.get('port'), function(){
console.info('Express server listening on port ' + app.get('port'));
});
The controller file is cotizacion.js:
var phantom = require('phantom');
exports.generar = function(req, res, next){
if(!req.body.cotizacion){
return next(new Error('No se enviaron datos de cotización'));
}
var cotizacion = req.body.cotizacion;
req.app.render('test', {cotizacion: cotizacion}, function(err, html){
generarPDF(cotizacion, html, function(){
res.send("1");
});
});
};
exports.testGenerar = function(req, res, next){
res.render('test', {});
};
generarPDF = function(cotizacion, html, callback){
phantom.create(function(ph){
ph.createPage(function(page){
page.set('paperSize', { format: 'Letter' });
page.set('content', html);
page.render(__dirname + '/test.pdf', function(err){
ph.exit();
callback();
});
});
});
}
And finally my test.jade is:
doctype html
html
head
title Cotización PDF
link(rel='stylesheet', href='/css/pdf.css')
body
h1 Test
The following works, but is a little annoying
doctype html
html
head
title Cotización PDF
| <style type="text/css">
| body{ color: green; }
| </style>
body
h1 Test
The project structure is:
/
app.js
public/
css/
pdf.css
routes/
index.js
cotizador.js
views/
test.jade

Answer 1

Ok here is our solution for similar problem. Below JADE template, notice hrefs with a reference to JSON object properties:
doctype html
html(lang="en")
head
link(rel='stylesheet', type="text/css", media="all", href=report.statics.bootstrap)
link(rel='stylesheet', type="text/css", media="all", href=report.statics.custom)
body
Here is a code snippet, used for providing to the template CSS paths:
var createStatics = function (req) {
var hostName = url.format({protocol: req.protocol,
host: req.get('host')
});
return {
bootstrap: hostName + '/assets/reports/bootstrap-report.css',
custom: hostName + '/assets/reports/custom.css',
}
}
Next here is a JADE template compilation:
var fn = jade.compile(template);
Transportation object, used for passing required by JADE template utility objects:
var report = {
statics: statics,
title: 'Simple report title'
};
Rendering HTML report and retrieved as a stream...
var output = fn({
report: report
});