Problem when creating PDF template from scratch

Hi there,

I just created a new invoice template from scratch. It has been designed without any tables. It consists of the core html file, two CSS files and a graphic for the logo. I designed the template with Adobe Edge Reflow. I tested it on the browser and created a PDF file with the browser’s print function. Everything looks good. I then uploaded the new template to /application/views/invoice_templates/pdf/mytemplate.php and the two CSS files to /assets/mytemplate/css/ and /assets/mytemplate/img/, respectively. Actually, the files do not contain any fields for now. Everything is hardcoded. I will change the necessary fields later. The problem is that the file is rendered completely different from within Invoiceplane. The blocks (designed via div) are looking OK, but they are scattered over the page and the image is missing completely.

Is that the correct way to add a new template or am I doing something wrong (well, obviously, something is wrong) here? Is there something like a logging process or a debug function to check whether something produces errors or maybe a documentation how to design new templates?



I did a lot of practice with the templates in recent weeks. engine exports in pdf processes the layout in a different way than the classic html & css. Has limits.

Have already been addressed in other threads, if you search in the list you find them.

ps. probably if the image you are exposed you used the wrong url.
ps. tip: try the style css directly into the .php file before connecting via external href

Here you can attach the template file if you want, someone might help you fix it if possible

The thing is that you can’t compare plain HTML sites with output that is generated by the PDF engine (in our case mPDF).

Understood, but how do I setup a template that looks like the one I need? I can design with external tools and check that they look correctly in a browser. Printing them to PDF works also great. So, how can I make sure mPDF will render them the same then?

Thanks for the ideas, but I used the CSS sheets the same way as the default invoice uses them. I also used the same directories. The image is at the correct URL because I managed in one version to have it shown. Unfortunately, the size was wrong (used absolute hight and relative width -> creates weired images ;-). Since I corrected both to use absolute values the image vanished…

PS: I also tried to check the examples from the mPDF website. But they are far, far away from what I want to achieve…

U have to print an invoice on browser and reload page with the selected template and see if your mods look fine in the preview.
Is the only way …
Invoice on left side … html editor on the right … and reload , reload, reload … :stuck_out_tongue_closed_eyes:

yeah, that’s one option, although it is no real option :sunglasses:

Anyway, I read a lot about the mPDF and somewhere the documentation said that it does not handle bootstrap CSS. Bad, I used bootstrap CSS. Now I converted to good (?) old HTML tables and now it works like a charm. However, this is hard to code since I do not have a piece of software that is that old. Tables aren’t the standard anymore…

I just need to fix some of the fields from the database. But this is just a minor issue.

Thanks anyway for your support!