Removing whitespace (for left, top, right margin) while generating PDF document

Report · Feb 12, 2022

I am using the below code to generate a PDF. The top part of the page is an image but there is whitespace while placing the image in the generated PDF. How do i remove the whitespace from the PDF. Any suggestions? Please find the code snippet below. Attached the CURRENT.JPG and EXPECTED.JPG images. In the current you can find a portion marked in red which i need to remove. The PDF should look exactly like the expected.JPG

<cfdocument pagetype="legal" format="PDF" marginbottom="0" margintop="0" marginleft="0" marginright="0" >
<table border=0 cellspacing=0 cellpadding=0 height=200>
<tr><td valign=top align=left>
<img src="https://www.getinge-training.com/images/TopHeader.jpg" width="1429" height="496" border=0>
<br><br><br><br><p align=center><font size=10>NAME OF THE PERSON</td></tr>
</table>
</cfdocument>

Report · Feb 13, 2022

There are a couple of problems, and at least one solution.

The problem is in the fact that the border you see is actually an html margin (for the implicit body) of 8 pixels, on the top, left, right, and bottom. You can see it if you just remove the cfdocument tag and view the HTML in a browser.

And on the surface, you should be able to change that/those margins, such as with css setting the body margin to 0. But you will find that while doing that makes that border go away in a browser, it does NOT go away in the cfdocument. This is just a limitation of the very old internal browser engine that CF has embedded since CFDocument was added at the turn of the century (called the ICE Browser).

So instead, as you may know, CF11 added a NEW way to generate PDFs in CFML, using cfhtmltopdf instead of cfdocument. And indeed, if you switch the cfdocument (open and close tags) to cfhtmltopdf, the border will be gone. And you don't even need to modify your HTML at all (no need of a body tag or styling of its margin).

Sometimes, we just have to let go of cfdocument and consider using cfhtmltopdf when possible. Note that it does rely on a separate "ColdFusion add-on service" that needs to be running and can be installed along side CF or installed separately, both of which would by default run the add-on service on the same machine as CF (but it can be installed on yet another machine). Then the CF Admin has a "PDF Service" page that points CF at that add-on service (and has buttons for starting and verifying the connection from CF to that service).

Let us know if that may work for you. If not, I am sure others will chime in with still more possibilities for you to consider.

/Charlie (troubleshooter, carehart. org)

Report · Feb 13, 2022

Thanks for the reply. I used cfhtmltopdf (code snippet below) where it looks better but there are still few pixels shown on left and top. The requirement is to show an image in the PDF certificate. Is there anything else i should do to avoid the whitespace. Also attached the generated PDF.

Report · Feb 14, 2022

It seems to work well with the body margin 0:

body { margin:0; }

</style>
</head>
<body>
<img src="https://www.getinge-training.com/images/TopHeader.jpg" width="1429" height="496" border="0">
</body>
</html>
</cfhtmltopdf >

Report · Feb 14, 2022

This worked great. Thank you.

Report · Feb 14, 2022

Hi @Sandhya231275905kpl ,

Two suggestions:

First of all, improve the HTML. That is relevant because the relative positions of elements are taken into account during the display of an HTML document.
The following don't seem right: (a) the <br> tags following the <img> tag within <td>. (b) the height attribute of <table>. (c) the absence of a closing tag for <p> and <font>. You could improve that to something like
```
<table border="0" cellspacing="0" cellpadding="0">
<tr>
	<td><img src=""https://www.getinge-training.com/images/TopHeader.jpg" width="1429" height="496" border="0"></td>
</tr>
<tr>
	<td>&nbsp;</td>
</tr>
<tr>
	<td>&nbsp;</td>
</tr>
<tr>
	<td>&nbsp;</td>
</tr>
<tr>
	<td><p align="center"><font size="10">NAME OF THE PERSON</font></p></td>
</tr>
```

To get the picture to fit as tightly into the margins as you want, then:
(a) place the table into a Div box;
(b) experiment with various negative margin values for the box till you get the fit you like.

<cfdocument pagetype="legal" format="PDF" marginbottom="0" margintop="0" marginleft="0" marginright="0" ><div style="position:relative;margin-top:-0.11in;margin-left:-0.07in;margin-bottom:-0.06in;margin-right:-0.08in;width:100%;">
	
<table border="0" cellspacing="0" cellpadding="0">
...
</table>
</div>
</cfdocument>

Report · Feb 14, 2022

This solution worked great too. Thank you 🙂

Removing whitespace (for left, top, right margin) while generating PDF document

3 Correct answers