Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generated PDF has no style, no images.

See original GitHub issue

Hello,

The header of my HTML file looks like this:

<head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
</head>

Somewhere else in my HTML file, I have an image:

<img src="img/profile.jpg">

I am trying to compile with the following script (main.js):

let src = fs.readFileSync(`./src/in.html`, 'utf-8')
const options = {
        "base": `file://${__dirname}/src/`,
        "format": "A4",
        "orientation": "portrait"
}
pdfc.create(src, options).toFile(`./out/out.pdf`, (err, res) => {
        if (err) return console.log(err)
        console.log(res)
})

Here is the file structure:

|- main.js
|- src/
   |- in.html
   |- style.css
   |- img/
      |- profile.jpg
|- out/

The resulting PDF has no style, no images… I’m guessing something is wrong with options.base, but it is pointing to the right directory and the files are where the HTML file expects them to be. Am I passing the options wrong?

Thanks.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5

Top GitHub Comments

3reactions

johnnie5100commented, Mar 31, 2022

I had the same problem, I solved just adding the localUrlAccess option, this is my code:

    var fs = require('fs');
    var pdf = require('html-pdf');
    const path = require('path');

    var html = fs.readFileSync('./templates/index.html', 'utf8');
    let base = path.resolve('./templates/static') + '/';
    base = base.replace(new RegExp(/\\/g), '/');

    var options = {
        "format": "Letter",
        "base": "file:///" + base,
        "localUrlAccess": true, // set this to true to enable local file access
    };

    pdf.create(html, options).toFile('./public/example.pdf', function (err, res) {
        if (err) return console.log(err);
        console.log(res); // { filename: '/public/example.pdf' }
    });

I hope you find it helpful 👍

2reactions

Gotvnacommented, May 31, 2022

Leave this package if you want to nice ans easy css