This is an archived forum post. The information may be outdated. Contact us if you have any questions.

CSS and Nodejs

lpuccio wrote on 2016-12-10:
Hello,

I am building a Node Express app. The intent is for when the user clicks a button, to generate a page using the handlebars engine and convert it to a pdf before sending it back to the browser.

Right now it's working; the correct html string is being generated in the engine, but the PDF is not applying any of the style sheets, resulting in a poor layout. I've confirmed the <link> tags containing the style sheets are there. Here is a summary of the Node Express code.

router.route('/pdf')
    .get(function(req,res){
/*do a bunch of things to generate the html. 
Mostly taking parameters from the req object to create the handlebars context */

            res.render(view, context, function(err,html){
                     var client = new pdf.Pdfcrowd("MYUSERNAME", "MYAPIKEY");
                     client.convertHtml(html,pdf.sendHttpResponse(res),{
                                use_print_media:true,
                                   } );  
                      });
})
support wrote on 2016-12-12:
Hello,

If you can post here a sample HTML string that we could use to reproduce the issue, we will look into it.
lpuccio wrote on 2016-12-13:
Sure, here's a mockup of how it comes out when I log the string in the console...The main site is an angualr app, though that is not relevant to the PDF view. I've included the attributes here for completeness.

<!DOCTYPE html>
<html ng-app="MyAngularApp">
<head land="en">
<meta charset="UTF-8">
<title>MY SITE TITLE</title>
<link href="/css/views/MyCSSFILE.css rel="stylesheet"/>
<script type="text/javascript" charset="utf-8" src="/js/views/MYJSFILE.js"></script>
</head>
<body ng-controller="myAngularController">

<!-- My body code is here, looking as it should look -->

</body>
</html>


I was thinking, I'm using my default handlebars layout for the PDF view. Will that not work serverside? Should I have a second layout with different relative paths?
support wrote on 2016-12-14:
Hello,

This is because your code uses relative URLs but our server does not know where to download the style sheet from.

1/ You can zip the external files together with the HTML document and send the .zip file to the API using the convertFile() function.

2/ If the files are accessible on the public Internet, you can link them using absolute URLs, an example:
<link href="http://example.com/css/views/MyCSSFILE.css rel="stylesheet"/>

3/ An alternative to 2/ is to use a relative URL in combination with the <base> element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)
lpuccio wrote on 2016-12-17:
Option 3 worked, thank you. Now I have some new issues.

I'm setting the pdf_name field of the options, but no matter what I put there, the file comes back with the name 'generated'.

I have a single PNG image in the html. My console is telling me it's loading before the file is sent, yet it never appears in the PDF. I've got no_images set to false.

Finally, even though I have use_print_media set to false, it still looks like it's using the print media css, and even doing that automatic browser thing where it gets rid of the background colors for html tags, etc.

Thanks.
support wrote on 2016-12-19:
Hello,

Again, if you can send us a sample Nodejs code that demonstrates the issue, we will look into it.
lpuccio wrote on 2016-12-19:
nothing much changed with the node code, I just changed added some parameters.

router.route('/pdf')
    .get(function(req,res){
/*do a bunch of things to generate the html. 
Mostly taking parameters from the req object to create the handlebars context */

            res.render(view, context, function(err,html){
                     var client = new pdf.Pdfcrowd("MYUSERNAME", "MYAPIKEY");
                     client.convertHtml(html,pdf.sendHttpResponse(res),{
                                use_print_media:false,
                                 pdf_name:'My_PDF.pdf',
                                no_images:false

                                   } );  
                      });
})
support wrote on 2016-12-22:
Hello,

The nodejs code looks fine to me. Could you also send us the actual HTML code that is being converted?
lpuccio wrote on 2017-01-07:
Here is the raw HTML, attached as a file, sorry for the delay. For what it's worth, the page looks fine in a browser, but the PDF looks more like a print view.
support wrote on 2017-01-11:
Hello,

We tried to convert the test file and the resulting PDF looks fine to us. Could you please post a screenshot of the PDF and highlight the problems?