I'm using wkhtmltopdf to generate a .pdf file for print out of HTML code. My issue is that when I generate the pdf, the HTML elements are moved around and do not stay with their original position.
My code for generating the pdf is:
$address = 'http://www.example.com/sendpdf/' . $card . '/';
$snappy = new Pdf('/usr/bin/wkhtmltopdf');
$snappy->setOption('lowquality', null);
$snappy->setOption('dpi', 100);
$snappy->setOption('disable-smart-shrinking', true);
$snappy->setOption('page-width', 127);
$snappy->setOption('page-height', 178);
$snappy->setOption('margin-left', 0);
$snappy->setOption('margin-top', 0);
$snappy->setOption('margin-right', 0);
$snappy->setOption('margin-bottom', 0);
$snappy->setOption('stop-slow-scripts', null);
$snappy->setOption('enable-javascript', true);
$pdf_content = array( $card, $snappy->getOutput($address) );
I've also tried looking at the HTML version with both Firefox, Safari and Chrome. In all versions the elements seem to be correctly positioned. It seems to only be an issue in the PDF version.
Anyone have any ideas of how to solve this?
After a lot of tweaking and improving this application to get it pixel perfect to the HTML, I have found out multiple things that helps to solve this problem. I hope some of you can use it.
Use white-space: nowrap;. For some reason on the PDF I got linebreaks on texts that didnt have any linebreaks in the HTML. I did a lot of testing of this and I could not find a good pattern to recreate the issue, but it seemed to be that in the PDF, it thought that the div was less wide in the HTML, and then pushed the content down to a second row. So I solved this by using white-space: nowrap;
Obviously it is important that both the PDF and the HTML you want to make it from have the exact same CSS Styling. But make sure that other things such as <meta name="viewport"> are identical.