Node-html-pdf: Path for base file not working

[anishtr4]

I was trying to build pdf using node WebKit, but when we are passing images base path using the following arguments it is not working same for CSS also

var options = {
format: 'Tabloid',
"base": "C:\Users\Anish\Desktop\my\img",
};

[marcbachmann]

1. you have to prefix the base with file:// on all platforms
2. you have to escape every backslash in the string

So that would result in something like

file://C:\\Users\\Anish\\Desktop\\my\\img

Here's another discussion to that problem:
https://github.com/marcbachmann/node-html-pdf/issues/119#issuecomment-190121856

There's still the issue that assets have to be relative if you use a base.

[DiegOrtega]

In mac is any different?

[splacentino]

I still have the issue:

project/src/pdf.js:

module.exports = function (content) {
  return new Promise((resolve, reject) => {

    const html = Buffer.from(content, 'base64').toString('utf8');
    // html = <img src="images/test.jpg">
    const base = 'file:\\\\' + Path.join(__dirname, '../templates/').replace('/', "\\\\");
   // base = file:\\C:\Users\myUser\Documents\project\templates\
    Pdf.create(html, {
      format: 'A4',
      base: base,
      type: "pdf"
    }).toBuffer((error, buffer) => {
      if (error) {
        return reject(error);
      }

      return resolve(buffer);
    });
  });
}

project/templates/images/:

• test.jpg

And no image is shown on the generated PDF

[huhushirley]

Look here ,I try it success.
absolute path: /Users/vv/Desktop/Question/love-weather-exam-server/static
my project name: love-weather-exam-server

I'm using Express my file tree is like

|-static/
    |--BSONGSJ.TTF
    |--certificate.jpg
|-src/

setting:

const base = path.resolve('static'); //  just relative path to absolute path 
base: `file://${base}`,// you have to set 'file://'

html css:

  @font-face { 
    font-family: 'BSONGSJ'; 
    src: url('static/BSONGSJ.TTF'); // you have to add 'static',if you dont do that,will fail
  }
  .certificate {
    font-size: 22px;
    font-family: "BSONGSJ" !important;
    width: 100%;
    height: 100%;
    background-image: url('static/certificate.jpg'); // you have to add 'static',if you dont do that,will fail
    background-size: contain;
    background-repeat: no-repeat;
  }

[costanza5813]

This worked for me on Windows:

Directory Structure:

|-app/
    |--css/
        |---invoice.css
    |--img/
        |---logo.svg
    |--tpl/
        |---invoice.tpl.html

Config:

base: 'file:///c:/path/to/project/app/'

Html:

...
<link rel="stylesheet" href="css/invoice.css">
...
<img src="img/logo.svg">
...

[prantabiswas]

@costanza5813 i tried your 'base' in my code,but it's not working,can I see your PDF that was printed?

[JPeer264]

For me I forgot the trailing slash. Somehow file:///Path/to/dir did not work but with a trailing slash: file:///Path/to/dir/ it did work. Maybe that is the reason why it is not working?

[Vishnupriya112]

    base: 'file:///E:/BES sri/new BES/vishnu_bes/bes_phase_2/public/uploads/logo/',
    <img src="logo.png">

For me its not working

[orensharon]

const base = path.resolve('./../public').
var options = {base: `file:///${base}/`}

[ayotycoon]

`` const base = path.resolve('./assets').replace(/\\/g, '/'); const options = { base:file:///${base}/`,
format: "A4",
}
````