CODEWITHSUNDEEP
handlebars.jspdf-generationexpress-handlebarshtml-pdfnode-html-pdf
hrtlkr29
hrtlkr29

Reputation: 413

Generating pdf file from express-handlebars render with html-pdf library, css files not working

I'm trying to generating a pdf file which is generated from express-handlebars rendering. However, some css files don't seem to be working.

Bootstrap are still working okays, but the custom css (i'm using a theme) is not working. I have tried phantomjs config (--web-security=false,...), switching css folder directory from local to the server. But none of them seems to be working. Images are working fine.

generating html and creating pdf files

var config = {
        format: "A4",
        orientation: "landscape",
        base: "http://127.0.0.1:3002/uploads/theme/",
        timeout: 100000, 
        phantomArgs: ["--web-security=false","--local-to-remote-url-access=true"]
    }

    var html = await hbs.render('./views/pdf.handlebars', data)
    await fs.writeFile("pdf.html", html, function(err) {
        if(err) {
            return console.log(err);
        }
    })
    var fileName = uuid.v4()
    await pdf.create(html, config).toFile(`./downloads/${fileName}.pdf`, function (err, res) {
        if (err) return console.log(err);
        response.send({ success: true, data: { downloadURL: fileName } })

including css files:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">

server receiving calls from css files:

Imgur

Expecting results:

Imgur

Actual result:

Imgur

As you can see, bootstrap and font-awesome are working fine, but the "style.css" is not working. Anyone have any idea about this problems? Many thanks in advance!

Upvotes: 1

Views: 4988

Answers (1)

Pranav Kapoor
Pranav Kapoor

Reputation: 181

Your server code is reading only HTML files and not css files , so css is actually being not used, use inline css. I am also looking for methods to write separate HTML and CSS and merge to form pdf.

Upvotes: 1

Related Questions