Node-html-pdf: html-pdf converter: Images placed inside options header are not rendering in pdf

Created on 15 Oct 2019 · 6Comments · Source: marcbachmann/node-html-pdf

I am using html-pdf( v2.1.0) to convert and generate report in pdf format. I tried to have common header in all the pages using header option provide in the plugin by setting the base path like below.

var base = 'file://' + __dirname + '/logos/';
Printing base path
file:///Users/Documents/Sample Project/Code/Web Services/api/logos/

"header": {
          "height": "25mm",
          // "contents": "<img height='100' width='100' src='ACL.png'>"
         "contents": "<P ALIGN=CENTER STYLE='margin-top: 0.04in; margin-bottom: 0.46in'><B>ACL Report</B><IMG SRC='SUN.png' ALIGN=LEFT HSPACE=12 WIDTH=113 HEIGHT=41 BORDER=0><IMG SRC='AAL.png'  ALIGN=RIGHT HSPACE=12 WIDTH=135 HEIGHT=33 BORDER=0></P>"
        }

Please help if anyone have faced the same issue.

Source

harsha2687

👍2

Most helpful comment

I was able to get it working doing the following:

Determine your absolute local base file path:

    const cwd = process.cwd();
    const base = `file://${cwd}/public`;

Set the image you want on the header, using the absolute path:

const cwd = process.cwd();
const base = `file://${cwd}/public`;

 const options = {
        format: 'Legal',
        orientation: 'portrait',
        border: '10mm',
        width: '215.9mm',
        height: '355.6mm',
        footer: {
          height: '10mm',
        },
        type: 'pdf',
        timeout: 30000,
        header: {
          height: '25mm',
          contents: `
          <div style="text-align: center;">
            <img src="${base}/my-image.png" width="200" height"100"/>
          </div>`,
        },
      };

Add another img tag also using the absolute file path, in the body of the HTML. As @rudiw mentioned, it should be set to display: none; because you need the tag, but you don't want to render the tag.

 `<!DOCTYPE html>
    <html>
      <head>
        <title>My page</title>
        <meta charSet="utf8" />
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
      </head>
      <body>
        <img style="display: none;" src="${base}/no-avatar.png" width="200" height"100"/>
        <div id="root">${html}</div>
      </body>
    </html>`

It's important that both img tags have the absolute file path. Or else it did not work for me. I used process.cwd() since the absolute paths will be different between my local build and the server I deploy my work to (two different environments, therefore different locations). So it was important to get that path dynamically.

embpdaniel on 17 Nov 2020

❤2

All 6 comments

You must also add the image in your html body like below:

<html>
<body>
<img  src="SUN.png"/>
... other content
</body>
</html>

boyiFan on 21 Oct 2019

👍1

I need add 2 image tags in body (should be display:none;):

<img
    src="img/logo.png"

and in header:

<img
    src="file:///C:/Users/..../logo.png"

also make sure the base:
base:file:///${path.join(root.get(), 'assets/').replace(/\/g, '/')}``

it is works in "html-pdf": "^2.2.0",

rudiw on 16 Dec 2019

I am using same format but this code is not working

sankarpetro on 3 Feb 2020

why is use of root base: file:///${path.join(root.get(), 'assets/').replace(//g, '/')}``

sankarpetro on 3 Feb 2020

Hi All,
I am trying to show image in header but it keeps on showing blank space. I tried using options as well as
div id="pageHeader" style = "height:75px"
img src="http:example.com/abc/aaa"

I even tried to convert image to base64 and set as
div id="pageHeader" style = "height:75px"
img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...."

Please help me ASAP.

Issue created : https://github.com/marcbachmann/node-html-pdf/issues/561

abandral on 28 Mar 2020

I was able to get it working doing the following:

Determine your absolute local base file path:

    const cwd = process.cwd();
    const base = `file://${cwd}/public`;

Set the image you want on the header, using the absolute path:

const cwd = process.cwd();
const base = `file://${cwd}/public`;

 const options = {
        format: 'Legal',
        orientation: 'portrait',
        border: '10mm',
        width: '215.9mm',
        height: '355.6mm',
        footer: {
          height: '10mm',
        },
        type: 'pdf',
        timeout: 30000,
        header: {
          height: '25mm',
          contents: `
          <div style="text-align: center;">
            <img src="${base}/my-image.png" width="200" height"100"/>
          </div>`,
        },
      };

Add another img tag also using the absolute file path, in the body of the HTML. As @rudiw mentioned, it should be set to display: none; because you need the tag, but you don't want to render the tag.

 `<!DOCTYPE html>
    <html>
      <head>
        <title>My page</title>
        <meta charSet="utf8" />
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
      </head>
      <body>
        <img style="display: none;" src="${base}/no-avatar.png" width="200" height"100"/>
        <div id="root">${html}</div>
      </body>
    </html>`

embpdaniel on 17 Nov 2020

❤2

Was this page helpful?

0 / 5 - 0 ratings