1

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!

hrtlkr29
  • 383
  • 1
  • 7
  • 21

1 Answers1

1

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.

Pranav Kapoor
  • 171
  • 1
  • 3
  • what i did is i wrote then i read both HTML and css and merge the files. `let tempHTML = fs.readFileSync(index.html); let tempCss = fs.readFileSync(index.css') dataSrc = tempCss.toString() + tempHTML.toString() let template = Handlebars.compile(dataSrc); let resultTemp = template(data);` – Pranav Kapoor Nov 27 '19 at 07:08
  • exactly. copy bootstrap css source and place it inside under head and viola! – Caner Aug 15 '20 at 10:01