CODEWITHSUNDEEP
phphtmllayoutmpdf
user 1007017
user 1007017

Reputation: 391

Fixed layout HTML table distorted when rendered into mpdf

Although the HTML is generated in a fixed static layout with its own CSS, the HTML gets distorted if rendered with mpdf into a pdf-file.

    $mpdf = new Mpdf([
        'mode' => 'utf-8',
        'format' => [460, 405], // should be big enough to fit
        'orientation' => 'P',
    ]);


    $mpdf->AddPageByArray([
        'margin-left' => 0,
        'margin-right' => 0,
        'margin-top' => 0,
        'margin-bottom' => 0,
    ]);

    $mpdf->WriteHTML($data);
    $mpdf->Output($filename . '_EZ.pdf', 'I');

The HTML is generated based on the following template

https://github.com/sprain/php-swiss-qr-bill/blob/master/src/PaymentPart/Output/HtmlOutput/Template/PaymentPartTemplate.php

What causes this behavior in mpdf?

PDF Output with Mpdf

HTML Output

Upvotes: 0

Views: 656

Answers (1)

user11854874
user11854874

Reputation:

Well mpdf is very specific about what css tags you can use and what html tags to use where. I recommend going through the manual. But the biggest problem I see is using divisions in the table. Mpdf doesn't support that. Look at supported tags in the documentation.

I recommend rewriting the entire template read through the docs and first test only half of your design etc.

But to give you a couple of pointers that helped me.

  1. In a table cell: Always use spans and break to get the desired output.
<span class="some-class">Value</span></br>
<span class="some-class">Line2</span></br>
  1. If aligning items differently in a table use attribute align.
  2. Use inline css when possible.
  3. Go step by step figure out just a part of your layout and then you should be able to figure out the rest.
  4. Prepare yourself to rewrite the entire template 2 - 4 times at least.

Upvotes: 2

Related Questions