This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Custom Report front page issues

bambam wrote on 2012-11-19:
Hi there,

I currently have a Report, built using php, that creates an HTML file, which gets turned into a pdf using the API. There is only one thing now that is frustrating me...

As it is a business report I have it set up with a front page, which has a background image, and Title, etc. I have stripped the header and footer from the page, but for whatever reason the image that is displayed, is not displayed at the correct size.

The image is set to 850px x 1197px. which should make it far too big, but in reality, it is actually too small.

I understand that i cant remove the margins from this page alone, and that's fine. But i also cant find any way of displaying it properly..

here is the code used to generate it..
//call the pdf API
include 'pdfcrowd.php';

try {
    
	//build the pdf, headers, margins, etc
    $client = new Pdfcrowd("my username", "my api key");

	$client->setPageWidth("210mm");
	$client->setPageHeight("297mm");
	$client->setVerticalMargin("40mm");
	$client->setHorizontalMargin("15mm");
	$client->setPageNumberingOffset(1);
	$client->setHeaderHtml('<embed src="http://www.etask.it/images/email/MC_header.jpg" width="100%" />');
	$client->setFooterhtml('<p><embed src="http://www.etask.it/images/email/MC_footer.jpg" /></p><p style="text-align:center">%p</p>');
	$client->setHeaderFooterPageExcludeList(1);
	$client->convertURI('http://www.etask.it/pdfdocs/maturity-report.html', fopen('pdfdocs/maturity-report.pdf', 'wb'));

support wrote on 2012-11-20:
The aspect ratio of the image must be the same as the aspect ratio of the printable area. Otherwise the image will not fit the area entirely.
Alternatively, you can use the background-size property to adjust image dimensions. Here is an example that prints the image so that it covers the whole A4 page - the resulting PDF is here.
$html='
 <body style="margin:0;padding:0">
  <div style="background-repeat:no-repeat;
              background-size:794px 1122px;
              contain;background-image:url(http://www.etask.it/images/maturity-spider/MC_page_wierd.jpg);
              height:1122px">
  </div>
</body>';
    
$client->setPageWidth("210mm");
$client->setPageHeight("297mm");
$client->setVerticalMargin(0);
$client->setHorizontalMargin(0);
$pdf = $client->convertHtml($html);


The following formula is used to convert millimeters to pixels, so A4 is 794 pixels by 1122 pixels.
px = 96 * mm / 25.4


The API does not allow specifying different margins on different pages. A workaround for your case could be to create two PDF files: 1/ the cover page without margins and 2/ the report with margins set. You can then merge the files on your end using for example the pdftk tool - the idea is outlined here.

Hope this helps.