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.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:6

Top GitHub Comments

5reactions

embpdanielcommented, Nov 17, 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>`

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.

1reaction

boyiFancommented, Oct 21, 2019

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

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

Top Results From Across the Web

Add image in header using html-pdf node module

It is possible to add the image in options header. 1.Load the image in html body with "display:none" style. 2.Then add the image...

Headers and Footers with SelectPdf HtmlToPdf Converter

Select.Pdf Html To Pdf Converter can add headers and footers to the generated pdf document using the P:SelectPdf.HtmlToPdf.Header and P:SelectPdf.HtmlToPdf.

FAQ about ExpertPDF - .NET converter from HTML to PDF ...

Q: In rendered PDF document the images and text fonts appear to be smaller ... For other HTML documents the rendered content is...

Converting HTML to PDF with Blink engine | Syncfusion

Learn how to convert HTML to PDF using Blink rendering engine with various ... There is also no need to set BlinkPath to...

NReco.PdfGenerator: convert HTML to PDF in C#/.NET (FREE)

Popular C# wrapper for wkhtmltopdf with simple HTML to PDF API. Supports CSS/JS, custom fonts, page header/footer. Easy deployment (all-in-one DLL).