Skip to main content
S
Sandhya231275905kpl
Participating Frequently
February 12, 2022
Answered

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

  • February 12, 2022
  • 2 replies
  • 1463 views

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>

    This topic has been closed for replies.
    Correct answer BKBK

    Hi @Sandhya231275905kpl ,

    Two suggestions:

    1.  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>
​
    2.  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>​

    2 replies

    BKBK
    BKBKCorrect answer
    Community Expert
    February 14, 2022

    Hi @Sandhya231275905kpl ,

    Two suggestions:

    1.  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>
​
    2.  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>​
    S
    Sandhya231275905kplAuthor
    Participating Frequently
    February 14, 2022

    This solution worked great too. Thank you 🙂

      Charlie Arehart
      Charlie Arehart
      Community Expert
      February 14, 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)
        S
        Sandhya231275905kplAuthor
        Participating Frequently
        February 14, 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.

         

        <cfhtmltopdf marginBottom='0' marginLeft='0' marginRight='0' marginTop='0' orientation="portrait" pageType="letter" saveAsName="PersonsName" >
        <img src="https://www.getinge-training.com/images/TopHeader.jpg" width="1429" height="496" border="0">
        </cfhtmltopdf >

        S
        shige.
        Participating Frequently
        February 14, 2022

        It seems to work well with the body margin 0:

         

        <cfhtmltopdf marginBottom='0' marginLeft='0' marginRight='0' marginTop='0' orientation="portrait" pageType="letter" saveAsName="PersonsName" >
        <html>
          <head>
            <style>

              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 >

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices