2

I am trying to create a template for a Donation-Thank-You letter for one of our clients. So far so good and it works and looks fine if you print one letter at a time. Of course, to be efficient, our client would like to be able to print multiple letters at the same time addressed to multiple different contacts. This is where I ran into a road block which I have not been able to find a solution for anywhere: If I select multiple contacts for which I would like to generate a pdf from my template, they get printed on top of each other, I can tell from the names being written over each other.

I discovered that when I remove the rel="stylesheet" attribute from my <link/> tag it will print the individual documents but the css is obviously missing since I removed the rel="stylesheet". I have a strong suspicion it has something to do with wkhtmltopdf which renders the template but, like I said, I have not been able to find a solution.

My goal is to be able to print multiple, individual documents for multiple contacts at once and have my css work. Has anyone run in a similar issue and solved it? Or does anyone know what else I could look for?

Edit to add CSS:

<style>

{literal}

   @font-face {
     font-family: 'Montserrat';
     src: url('https://test.site.org/Montserrat-Regular.otf') format('opentype');
     font-weight: regular;
   }

   @font-face {
     font-family: 'pt-serif';
     src: url('https://test.site.org/fonts/pt-serif/PTF55F.ttf') format('truetype');
     font-weight: regular;
   }

   * {
     font-size: .97em;
     font-family: pt-serif;
   }

   th {
       font-weight: bold;
   }

   .logo {
       position: absolute;
       right: 100px;
       top:20px;
   }

   .Impressum {
       vertical-align: top;
       position: absolute;
       left: 385px;
       font-family: Montserrat;
       font-size: 0.75em;
       padding-top:120px;
   }

   .invisible {
       display: none;
   }

   .Absender {
         position: absolute;
         top:125px;
         left: 20px;
         font-size: 0.65em;
         font-family: Montserrat;
   }

   .Empfaenger {
       position: absolute;
       top:145px;
       left: 20px;
       vertical-align: top;
       font-size:0.9em;
       width:350px;
       font-family: Montserrat;
   }

   .intro {
       font-size: .97em;
       font-family: pt-serif;
       padding-bottom:12px;
   }

   .Rechnungsdatum {
       position: absolute;
       top:300px;
       right:95px;
       font-size: 0.9em;
       text-align: right;
       width:150px;
       font-family: pt-serif;
   }

   .Rechnungszweck {
       position: absolute;
       top:370px;
       left: 15px;
       font-size: 1.2em;
       width:100%;
       font-family: Montserrat;
   }

   .Content {
       position: absolute;
       top: 390px;
       left: 19px;
       font-size: 0.9em;
       font-family: pt-serif;
   }

   .footer {
       position: fixed;
       left: 0;
       bottom: -50px;
       width: 100%;
       font-family: Montserrat;
       font-size: 0.8em;
   }

   {
       /literal
   }
</style>

<link/> tag to include the file in my template: <link rel="stylesheet" href="/contacts.site.org/css/pdf.css" type="text/css" />

2
  • Can you show us the css? Or at least any part that might be relevant to pagination?
    – Demerit
    Commented Feb 16, 2022 at 17:08
  • I added it in my post
    – jrock
    Commented Feb 16, 2022 at 18:10

1 Answer 1

3

You're correct that it's wkhtmltopdf although I don't necessarily think it's a bug. The position: absolute is causing wkthmltopdf to position everything relative to (0,0) on the first page, whereas with dompdf it inserts a new page regardless.

If you use relative it works, but depending on what your body content looks like you may have to adjust.

1
  • Thank you so much! You are absolutely right and this fixed the problem.
    – jrock
    Commented Feb 22, 2022 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.