Node-html-pdf: Fonts and Images ignored in header and footer
Hello,
I am working on an application that requires loading in fonts and images for the header and footer. I have tried both specifying the header as html or within the options on the component as specified.
It seems that when setting the base option to a relative file as per the documentation, this seems to work for the main content, however anything within the header and footer specifications seems to break.
The font is not correctly loaded and images dont seem to be found.
It would seem that maybe the scope changes somehow or that the base is not respected within these elements.
Any help would be appreciated.
thanks
theboyWhoCriedWoolf
All 19 comments
same issue
jannessm
on 8 Nov 2017
same issue
l2ysho
on 13 Nov 2017
I found solution, you should use full url to specify assets like fonts, css or images:
<img src="/img/logo.jpg"> // bad
<img src="http://www.mysite.com/img/logo.jpg"> // good
l2ysho
on 14 Nov 2017
For fonts it is Not working.
jannessm
on 14 Nov 2017
try something like this:
<style media="screen">
@font-face {
font-family: font_name;
src: url(your_url);
}
</style>
Ive already tried this. But it should be working in combination with the base property...
jannessm
on 14 Nov 2017
For me is not working either.
andrehsmendes
on 15 Nov 2017
@l2ysho, I tried this also. The problem is that I am running the request within my Node server which uses mutual tls authentication so each request back to itself is unable to certify itself.
I found a solution though, it would seem that instead of trying to set the base using the component itself, its better to pass the base through to all the required elements. so:
//in my node pdf generation file
function pdfAssetPath() {
return (process.env.NODE_ENV === 'development') ? `file:///${paths.appPublic().replace(/\\/g, '/')}` : `file://${process.cwd()}/build/static/`;
}
ejs.renderFile('server/views/pdf/pdfWrapper.ejs', { base: pdfAssetPath }, {}, function(err, wrappedHTML){
try {
pdf.create(wrappedHTML, {
format: "A4",
header: { height: '30mm' },
footer: { height: '18mm' },
border: { top: '0', right: '0', bottom: '0', left: '0' },
orientation: "portrait"
}).toFile(`./tmp/${fileName}-${uuidv4()}.pdf`, (error, response) => {
if (error) {
winston.error('PDF Generation failed', error);
throw error;
}
else {
resolve({ fileName, base64: getBase64String(response.filename, reject) });
fs.unlink(response.filename);
}
});
} catch(exception) {
reject(exception);
}
});
// my ejs template file for header
<div id="pageHeader-first">
<div class="header">
<td class="logoCell">
<img class="logo" src="<%= base %>/images/sample.svg" />
</td>
</div>
</div>
I also can't get images to render, even when I use the full path
mckalexee
on 20 Nov 2017
@mckalexee, if you paste some code might be able to help.
theboyWhoCriedWoolf
on 21 Nov 2017
Same issue, my font, picture, and CSS are fine but not when I specify a section as pageHeader...
B-StS
on 23 Nov 2017
I manage to get the image from a local drive by using:
<img src="file:///C:/work/SimpleLogo.png">
Chrome seems to accept just c:\work\ or c:/work/ but html-pdf needed the one showed above.
eLPe21
on 12 Dec 2017
@eLPe21 In the header section or the content of the page ??
My issue is only in the pageHeader id tag.
B-StS
on 12 Dec 2017
Not sure if I do it properly but I get the logo in the header:
<body>
<div class="container">
<div id="pageHeader">
<div class="logo">
<img class="image" src="file:///C:/work/SimpleLogo.png">
</div>
</div>
</div>
</body
Had to set max-height to 35mm even though the doc says the page header should be 45mm. Not sure if I did something wrong (probably) or a bug, but at least I get the logo in the header :)
eLPe21
on 12 Dec 2017
@eLPe21 I see... I'll try to put the full path of the server for the picture, but my main issue is that none of my CSS (which works perfectly until I put the "pageHeader" tag) are respected in the the header. Did you have a similar issue ?
B-StS
on 13 Dec 2017
Not sure if this help. but try to put that CSS under:
@media print {}
Also, currently I'm trying to use Google Chrome to convert html to pdf:
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless
--disable-gpu --print-to-pdf=c:\work\abc.pdf c:\work\a.html
With html-to-pdf bootstrap v4 table was not working very well on page break. On Chrome
there are some other issues
eLPe21
on 13 Dec 2017
See my comment here if you're having trouble rendering images in the header: https://github.com/marcbachmann/node-html-pdf/issues/239#issuecomment-352324398
nickvirden
on 18 Dec 2017
Is there already a fix for this ?
I tried everything but as soon as there is some image in a
The same happens for the pageFooter id's.
Even if there is only text in the div, this is not shown in the pdf (but it is visible in the html)
CajunDust
on 25 Sep 2019
@CajunDust I noticed that by giving a url path (https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) that image is rendered.
It's like the pdf is generated too fast for the module to go get local images.
Same problem with stylesheets so I put them all somewhere accessible by url and all is rendered as it should.
That's how I fixed it.
B-StS
on 25 Sep 2019
Related issues
jimit-hothi
路
4Comments
tsp1996
路
5Comments
ZBilel
路
4Comments
wobsoriano
路
3Comments
vivekiyer114
路
5Comments
Most helpful comment
I also can't get images to render, even when I use the full path