Node-html-pdf: Problem with CSS

[B-StS]

I want to use html-pdf to save a quote made with sails, ejs, and angular into a pdf to send it to the customer. All of this is pretty new to me...

I've read and try all I could about external CSS but I couldn't manage to make it work.

My assets/js controller looks like this :

    $scope.printPdf = function() {

        $http.post('/page/create-pdf', {
            printView: document.getElementById('printPdfSection').innerHTML,
            quoteNumber: $scope.createdQuote.createdAt,
        })
        .then(function onSuccess(sailsResponse){
            console.log('PDF CREATED');
        })
        .catch(function onError(sailsResponse){
            console.error('PDF ERROR :', sailsResponse);
        });
    };

And my api/controller pdf controller looks like :

    printPdf: function(req, res) {

        var pdf = require('html-pdf');
        var moment = require('moment');
        var fs = require('fs');

        var quoteNumber = moment(req.param('quoteNumber')).format('YYMMDDHHmm');
        var html = req.param('printView');
        var options = { 
            format: 'Letter', 
            border: {
                "top": "1in",            // default is 0, units: mm, cm, in, px
                "right": "1in",
                "bottom": "1in",
                "left": "1in"
            },
            base: req.protocol + '://' + req.get('host'),
        };

        pdf.create(html, options).toFile('./assets/pdfs/'+ quoteNumber +'.pdf', function(err, res) {
            if (err) return console.log(err);
            console.log(res);
        });
    }

I have a picture which show up so the base should be ok to get my css but it isn't... Any ideas ?

[B-StS]

Well it's ok I fixed it.
I'm sending my CSS before my html and now it work.

        var myCSS = '<link rel="stylesheet" href="/styles/bootstrap.min.css"><link rel="stylesheet" href="/styles/importer.css">';

        $http.post('/page/create-pdf', {
            printView: myCSS + document.getElementById('printPdfSection').innerHTML,
...

I do have 2 questions now...
1- The Grid is showing ok but my div tags has a border and background colour and they are not showing, I think I saw something about @media but I never used it so I don't really know what is wrong here.
2- All is fine (pictures and grid layout display) in the pdf so I added the id="pageHeader" in my div tag of the section I'd like to use as header. I tried it out and now the section is not showing the image nor the grid display... My html is showing right in my browser, so do I have to do something else with the pageHeader id for it not to mess my CSS ?

[B-StS]

I really need the id="pageHeader" to respect my CSS... The code is the same as above, but I just added the id tag for the section I need as header for all the pages. With the tag the CSS is gone, without it, CSS show up perfectly.
Can anyone help ?

[AlessandroAnnini]

any solution to this?

[B-StS]

@sun2rise I did solve it, even if it’s an ugly work around.
When using pictures and CSS from another server (I tested with Google logo) it works, so I ended up putting the logo and stylesheets on our website server and all showed up perfectly.
I had to put the tag inside the pageHeader div because they are rendered separately from the body and thus don’t have time to look for them (or well that's my understanding of it).
The other style customization that I needed I put in the html to be sure it would be rendered.
And hmm I had to downgrade one version under because there is a bug when using pageFooter-last.

[clement-faure]

No other solution for this ?