node-html-pdf
node-html-pdf copied to clipboard
marcbachmann
White-space above and below page with header/footer
Whenever I add a header or footer, there is a blank white space inserted above and below the page:
I've set absolutely every margin, border and padding to 0 (e.g. on the body, html, div tags). It works edge-to-edge if I simply remove the header and footer.
Is there any way around this?
I think it's to do with these lines here:
if (paper.header && paper.header.height === undefined) paper.header.height = '46mm' if (paper.footer && paper.footer.height === undefined) paper.footer.height = '28mm'
in function definePaperSize (content, options) here:
https://github.com/marcbachmann/node-html-pdf/blob/master/lib/scripts/pdf_a4_portrait.js
Edit: Not so sure now. These determine the header size, but it's still rendering the header lower than it should be for some reason.
I am also having same problem with header and footer . I can not remove the empty space .
Anyone fixed this issue ? what's the solution for this issue ?
I spent a while poking about in the source code but never found a solution. The only way I could get rid of the white space was to remove the headers and footers.
But have to implement the header and footer . spacing is the big problem :(
Yeah, I've just been accepting the whitespace. I might take another look at the source and see if I can figure it out again.
Interestingly I've found the issue doesn't occur on linux (Ubuntu) in our production environment, but does on windows in Dev. Might help track it down.
Generating PDF directly using phantom.js space not occurs . In html-pdf have some issues handling header footer .
This issue is also replicating on the linux. Is there any way to solve this without using the phantom.js directly.
Had the same problem and fixed it by adding style="width: 100%; height: 100%" to the div I was using for my footer. Hopefully that helps someone.
Oh, that just reminded me that this is probably caused by a default margin on the body of the header & footer elements. I'm not 100% sure whether this is really the problem here.
Phantomjs creates a separate html document for both of them. So adding a body {margin: 0;} to the elements might fix those white-spaces.
Maybe it's just the defaults as @hanvyj mentioned. AFAIK phantom can't automatically set the height. So you'll have to override those.
Oh yeah forgot to add that I also needed body { margin: 0; } along with the added style above.
@marcbachmann I set the paper.header and paper.header.height attributes and still have the same issue. I also tried to add <style>body { margin: 0 !important; }</style> when configuring the header contents but it didn´t help. Any suggestions? And do you generally take a look into that issue soon?
I'm having the same problem. There is a huge white space on the header.
I am also having the same problem. Setting body style and header.height does not work. The whitespace is increased if header.height is increased.
Any solutions?
@saurabhnemade
try setting the body and html margins to 0 and wkhtmltopdf zoom to 1
Got the same problem as @saurabhnemade.
The whitespace only occures in the PDF document generated from the script.
In my .html document everythink looks good. Even if i go into print preview and save the html as pdf everything is fine.
Find my Options below. Is there something wrong?
@Nightmarepg @saurabhnemade
I have completely removing whitespaces using
const pdfOptions = {
format: 'A4',
border: '0',
header: {
height: '0mm',
},
footer: {
height: '0mm',
},
};
@code-by but this also kills any header or footer you would like to display so not a viable solution.
To keep a completely usable header and footer I solved this issue by setting my top and bottom margins to negative values.
paperSize: {
format: "A4", orientation: "portrait",
margin: { 'top': '-20mm', 'left': '5mm', 'bottom': '-5mm', 'right': '5mm' },
headerHeight: '10.05cm',
footerHeight: '4cm'
},
fitToPage: false
Personally I ended up using negative margins I think to offset the content, which ended up working perfectly. If you're having no joy I can look up my solution once I'm back at work on Tuesday?
Scrap that, just realised I already shared my solution above, did it not work for you?
Scrap that, just realised I already shared my solution above, did it not work for you?
Not work, can I see your fully code? Which version do you use?
I have tried everything and nothing is working, this is my full code:
var html =
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Untitled-1</title>
<link href="Untitled-1-web-resources/css/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin-top:-60px;
padding:0;
border-width:0;
}
body {
background:#dddcdc
}
div.Basic-Graphics-Frame {
border-color:#000000;
border-width:1px;
border-style:solid;
}
#_idContainer000 {
display:inline-block;
height:155px;
width:817px;
border:1px solid blue
}
#_idContainer001 {
display:inline-block;
height:828px;
position:relative;
width:817px;
}
#_idContainer002 {
display:inline-block;
height:59px;
position:relative;
width:817px;
}
#_idContainer003 {
display:inline-block;
height:60px;
width:817px;
}
img._idGenObjectAttribute-1 {
height:100%;
min-width:100%;
width:100%;
}
div._idGenObjectStyleOverride-1 {
border-width:0px;
}
div._idGenObjectStyleOverride-2 {
background-color:transparent;
border-width:0px;
}
div._idGenObjectStyleOverride-3 {
background-color:#a7a8a8;
border-width:0px;
}
div._idGenObjectStyleOverride-4 {
background-color:#d6d6d6;
border-width:0px;
}
div._idGenObjectLayout-1 {
text-align:center;
}
.blueCell{
color:#26589C;
font-size: 12px;
font-family: Roboto;
text-align: left;
min-height:37px;
height:auto
}
.blackCell{
color: black;
font-size: 12px;
font-family: Roboto;
background: #E9EAEA;
text-align: left;
padding-left:5px;
min-height:37px;
height:auto
}
</style>
<body id="Untitled-1">
<div style="width: 100%; height: 100%" id="pageHeader" class="_idGenObjectLayout-1">
<img src="https://www.google.com/images/srpr/logo11w.png" alt="Smiley face" height="42" width="42">
</div>
<div class="_idGenObjectLayout-1">
<div
style="text-align:center; display: table; margin:0 auto"
id="_idContainer002" class="Basic-Graphics-Frame _idGenObjectStyleOverride-3">
<span
style="color:white;
font-size:26px;
font-weight: bold;
font-style: normal !important;
display: table-cell;
vertical-align: middle;
font-family: Roboto"
>
${companyName}
</span>
</div>
</div>
<div class="crop" style="position:absolute; left:47%; top:60%; ">
${logo}
</div>
<div class="_idGenObjectLayout-1">
<div id="_idContainer001" class="Basic-Graphics-Frame _idGenObjectStyleOverride-2">
<table cellspacing="10" style="margin:0 auto" width="90%">
<tr>
<td class="blueCell" >Company Overview </td>
<td width="80%" class="blackCell" colspan="3"> ${natureOfBusiness} </td>
</tr>
<tr>
<td class="blueCell"> Sector / Industry </td>
<td class="blackCell" width="30%"> ${industry} </td>
<td class="blueCell"> Number of Obligors </td>
<td class="blackCell" width="30%"> ${obligorsCount} </td>
</tr>
<tr>
<td class="blueCell"> Annual Turnover (USD Equivalent) </td>
<td class="blackCell" width="30%"> </td>
<td class="blueCell"> Min & Max Payment Terms(In Days) </td>
<td class="blackCell" width="30%"> ${minTerm} - ${maxTerm} </td>
</tr>
<tr>
<td class="blueCell">Requested Credit /
Finance Limit </td>
<td class="blackCell" width="30%"> ${currency} ${requiredAmount} </td>
<td class="blueCell"> Insurance Availability </td>
<td class="blackCell" width="30%"> </td>
</tr>
<tr>
<td class="blueCell">Facility Type(s) </td>
<td colspan="3" class="blackCell" width="30%"> </td>
</tr>
<tr>
<td class="blueCell">Obligor Country(ies) </td>
<td colspan="3" class="blackCell" width="30%"> ${obligorCountries} </td>
</tr>
</table>
<!-- -->
</div>
</div>
<div id="pageFooter" class="_idGenObjectLayout-1">
${footer}
</div>
</div>
</body>
</html>
`;
// var html2 = fs.readFileSync('./templatePDF.html', 'utf8');
// var base = 'file://' + __dirname + '/imgs/'
base = file:///F:/Downloads/AllFineonProjects/webapp%20FO/azure-fineon-webapp-fo/server/imgs
console.log(base)
var options = {
paperSize: {
format: "A4", orientation: "portrait",
},
fitToPage: false,
};
let fileName = Math.floor(Date.now() / 1000)
pdf.create(html, options).toFile('temp/'+ fileName+'.pdf', function(err, resp) {
if (err) return console.log(err);
console.log(resp);
res.setHeader('Content-Type', 'application/pdf');
let filePath = 'temp/'+ fileName+'.pdf'
res.download(filePath);
setTimeout(function(){
fs.unlinkSync(filePath)
},1000)
// { filename: '/app/businesscard.pdf' }
});
`
To keep a completely usable header and footer I solved this issue by setting my top and bottom margins to negative values.
paperSize: {format: "A4", orientation: "portrait",margin: { 'top': '-20mm', 'left': '5mm', 'bottom': '-5mm', 'right': '5mm' },headerHeight: '10.05cm',footerHeight: '4cm'},fitToPage: false
Can you show us full example? version?
Personally I ended up using negative margins I think to offset the content, which ended up working perfectly. If you're having no joy I can look up my solution once I'm back at work on Tuesday?
also please include your html template