Node-html-pdf: Include img and css from same server

[cperezvinsite]

Hi I'm using Express 4 my file tree is like

|-controllers/
  |--toPdf.js
|-routes/
|-public/
  |--stylesheets/
    |--print/
      |--print.css
      |--main.png

I'm sending with ajax the html I must export to pdf, i send a post request and that post execute a function in toPdf.js

the function looks like

var html = req.body.html
var config = {
  'directory': '/tmp',
  'format': 'Letter',
  'orientation': 'landscape',
  'border': '0.8in',
  'header': {
    'height': '10mm',
    'contents': '<div style="text-align: center;">Hi</div>'
  },
  'base': '/public/stylesheets/print/',
  'type': 'pdf'
};

pdf.create(html, config).toFile('./text.pdf', function(err, pdf) {
  if (err) {
    return console.log(err);
  }
  console.log(pdf);
});

In the html im usign

<link rel="stylesheet" type="text/css" href="print.css"/>

The thing is I cant get the image of the html (main.png) neither the css (print.css) could you give me an example how do I should use the base in config json and then how I should call the css and the Img into the html please.

I have tried with base prop:

'base': 'public/stylesheets/print/',

'base': '/public/stylesheets/print/',

'base': './public/stylesheets/print/',

'base': '../public/stylesheets/print/',

non of those works

Thanks.

[robertowm]

Same problem here. Anyone?

[marcbachmann]

base: 'file:///absolute/path/to/assets' should work

[robertowm]

Yes, I just tested it but @marcbachmann commented before me :)

[srawther]

I am on windows, and setting base doesn't seem to have any effect.

This is how base is setup in the config
"base": "file:///tech/app/src/meteor/app/public/",

Actual windows location c:\tech\app\src\meteor\app\public. This folder has subfolder content\images and content\style.

This is how css and image is in the html

Any help explaining how base should be set in the config is appreciated.

Thanks

[srawther]

Here is the css and image links in html, i didnt properly format the link and img tags in the previous post

<link href="/content/styles/pdf.css" media="all" type="text/css" rel="stylesheet"/>
<img src="/content/images/logo-with-text.png"/>

Thanks

[marcbachmann]

Can you try file://c:\\tech\\app\\src\\meteor\\app\\public

[srawther]

Hi Marc, thanks for the response. Your suggestion doesn't seem to work. Only working solution that i can found is if the images and stylesheets are in the same location as the base path. If the assets are stored in one of the subdirectiories of the basepath, then it doesn't seem to work.

So if my base is defined as "base": "file:///tech/app/src/meteor/app/public/content" and my assets are in the content folder it works, but if my assets are in the subfolder "assets" and if my link for css and image is like href="/assets/" then it doesn't work.

Thanks

[mpoettgen]

@srawther have you tried href="assets/someasset", if _assets_ is within _content_, or href="../assets/someasset", if it is next to it?

[srawther]

@mpoettgen, That did the trick. Looks like i have used "/" in front of my href path earlier, and that was messing things up. Anyways, your suggestion worked like a charm. Thanks for the help

Shahin

[iamakimmer]

is there a way to use a relative path for base?

[vmadman]

@iamakimmer I ended up quasi-forking html-pdf as part of my work on Grits.js, but my improvised solution should still work for you..

Within the PhantomJS controller script ( in html-pdf its called pdf_a4_portrait.js ), I added this:

page.onResourceRequested = function( request, rd ) {

    // Update URL to mimic website behavior
    var newUrl = request.url.replace( options.base, options.basePath );
    rd.changeUrl( newUrl );

};

I then pass a config like so:

{
    base: "http://ph.local/",
    basePath: "file:///some/path/www/",
    ...
}

The main problem is that using a /absolute/path in PhantomJS is not exactly the same as using it on a web server because the web server has the root path mapped to some place on the file system whereas PhantomJS is pulling directly from the file system. Thus if you refer to /css/some.css with a base of file:///some/path/www/ then PhantomJS will assume you meant file:///css/some.css.

By using a placeholder URL as a base and then swapping it out at the PhantomJS onResourceRequested level, you are basically simulating a web server mapping.

It is worth noting, also, that I pass the bottom most directory, or www root as my basePath and not the path of the actual file, which is necessary for anchoring /.

Hope this helps.

[chacliff]

hi could you create a test that handles this issue successfully and pulls from an example css file and image and creates a pdf with them. Your current tests literally load the binary data into the html before they go to phantomJS for parsing.

preferably a test for windows and nix system. I have been trying to get this working for a number of hours now on windows 7 without success.

so tried this

'<link href="..\\bootstrap.css" rel="stylesheet">'+ '<link href="..\\prescription.css" rel="stylesheet">'+

AND

'<link href="../bootstrap.css" rel="stylesheet">'+ '<link href="../prescription.css" rel="stylesheet">'+

I even tried the following for a link without a "base" parameter

'<link href="C://hapiProjects/ERX/trunk/prescription.css" rel="stylesheet">'

for my options i did the following

options = {
"height": "8in",
"width": "11.5in",
"orientation": "landscape",
"base": __dirname }
//__dirname results in base: 'C:\\hapiProjects\\ERX\\trunk\\controller' }

where my css lives in "trunk", alternatively i hardcoded base to the above value. and tried the following options.

"base": "file:////"+__dirname
"base": "file:///"+__dirname
"base": "file://"+__dirname
"base": "file:////C://hapiProjects/ERX/trunk/controller"

if there are other suggestions please let me know.i prefer not to use your solution where i have to read the files from the file system with fs, when i should be able to just tell them where they live on the file system.

[DidiF45]

Hi
I have the same problem than cperezvinsite (same structure)
But images aren't displayed in the generated pdf.
Here is my code :
var html = "<img src='photo.png' />";
var options = { "format": 'Letter', "base": 'file:///C:/Dev/myApp/web/app/img'};
pdf.create(html, options).toFile('C:/myApp/pdfs/testPdf.pdf', function(err, res) {
if (err) return console.log(err);
console.log(res);
});
I have tried what you said in the post but it doesn't work....
Do you have a solution that works ?
Thanks.

[molerat619]

Is there a clean solution for this now? It is very unintuitive.

[molerat619]

Ugly enough but one more working solution:

var base = path.join(__dirname, '../../../client/assets/');
base = base.replace(new RegExp("/", 'g'), "\\");
base = 'file:\\\\'+base;

html = html.replace(new RegExp("<img src=\"", 'g'), "<img src=\""+base);

[DiegOrtega]

someone has a solution for mac?

[pogan]

@DiegOrtega
pdfParser.create(html, {'base':'file://'+__dirname+'/'}) in app.js (note the ending slash)
and <link rel="stylesheet" href="app/dir/style.css"> in rendered html
worked things out for me on mac

[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;
  }

[NPellet]

@pogan The ending slash also did the trick for me, thanks.