Footer/Header and images #13
Comments
|
There is an open issue about that: marcbachmann/node-html-pdf#12 I'm almost done changing from phantomjs to headless chromium, and that will allow a One other breaking change will be that only files within the markdown file's directory (and subdirectories) will be able to be referenced (a limitation/security feature in chromium, it throws "Not allowed to load local resource" when using the |
|
Ok, great ! Thank you ! Hum ... the limitation can be an issue for me right now as I'm trying to keep assets in the same folder (header picture is the company logo), different from the MD folder |
|
Ok, I'll think of a solution for that... maybe it's easy to add an |
|
Parameter is fine for me. Hosting file on external service is not (but my only need should not drive you !). |
|
I just pushed Also please note that the pdf options key has been renamed to Btw you can also use a module.exports = {
pdf_options: {
format: 'A4',
margin: {
top: '15mm',
bottom: '15mm',
left: '15mm',
right: '15mm'
},
displayHeaderFooter: true,
headerTemplate: `
<div style="width:100%; text-align:right; border-bottom: 1pt solid #eeeeee;">
<font size="-1">A <b>Team</b><em>A</em> document</font>
<img style="vertical-align:middle; margin-right:10px; margin-left:10px;" width="60px" src="https://goo.gl/HkfCvS"/>
</div>"
`
}
} |
|
Update: Just tried referencing an image in the header template and sadly it does not work except with data URLs, e.g. At least it stays within the config that way, but with larger images it gets quite cluttered :/ What you could do is use a Some related upstream issues regarding styling and images: puppeteer/puppeteer#1822, puppeteer/puppeteer#1853, puppeteer/puppeteer#2388, puppeteer/puppeteer#2604. |
|
Thanks for the details. I made some tests using version 2.1.0, using an external js file for config. I have trouble with the style applied to header/footer : size is ridiulously small! Do you know which style is applied? In addition to that, Page {{page}}/{{pages}} is not interpreted anymore. I tried IMG with external file and you are right it does work. I did not try the base64 yet, but if it does work, that is fine for me (I won't integrate large picture in header/footer, just a small company/team logo). Nekloth |
|
Try setting the font size explicitly, e. g. by inlining a This should work: module.exports = {
pdf_options: {
format: 'A4',
margin: '15mm 12mm 17mm',
displayHeaderFooter: true,
headerTemplate: `
<style>
div { font-family: system-ui; font-size: 11px; }
.border-bottom { border-bottom: 1pt solid #eeeeee; }
</style>
<div class="border-bottom">A <b>Team</b> document</div>
`,
footerTemplate: `
<hr width='110%'>
<div>
Page <span class="pageNumber"></span>/<span class="totalPages"></span>
</div>
`,
}
}However I was struggling to get certain rules like |
|
Ok. Now, I have this settings that does the job: This will display header and footer information on the right of the page, with a bottom/top border. And picture works well too: TL;DR : that looks good for me! :) |
|
Thanks for the tip! It works ! :-) |
I'm trying to include images in my header, using the option file. My config.json file looks like:
As a result, I can see the picture location, but only white space instead of of picture...
Even if I remove any style option, the picture never displays.
Can we have conversion log (PhantomJS ?) ? That could help to understand the situation...
Thanks
Nekloth
The text was updated successfully, but these errors were encountered: