Drucken von Text in einer HTML-Tabelle mit einem Hintergrund

Question

Ich versuche, ein einfaches Zertifikat zu drucken. Der Text des Zertifikats ist als HTML-Tabelle angelegt. Ich stoße auf ein paar einfache, aber beunruhigende Probleme. 1) Meine CSS-Änderungen in der Tabelle werden vollständig ignoriert, wenn ich versuche, es über Chrome zu drucken. 2) Ich bin nicht in der Lage, einen Weg zu finden, konsequent zu drucken, der Text an den richtigen Stellen zentriert.
3) Ich kann keinen Weg finden, um die gesamte Tabelle zu transformieren und im Hochformat zu drucken.

Meine CSS sieht wie folgt aus:

<table class="certContent" style="display: block"> 
     <tbody > 
      <tr style="width: 800px !important"> 
       <td class="smallText">&nbsp;Valid From:&nbsp;{{vendor.dStartDate}}</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td class="smallText">Valid Till: {{vendor.dEndDate}}&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="2">&nbsp;</td> 
       <td colspan="2">&nbsp;</td> 
      </tr> 
      <tr> 
       <th colspan="4">&nbsp;{{vendor.sBusinessnameLegal}}</th> 
      </tr> 
      <tr> 
       <th colspan="2">{{vendor.iSic1}}</th> 
       <th colspan="2">{{vendor.iSic2}}</th> 
      </tr> 
      <tr> 
       <td colspan="2">{{vendor.iSic3}}</td> 
       <td colspan="2">{{vendor.iSic4}}</td> 
      </tr> 
      <tr> 
       <td colspan="4">&nbsp;</td> 
      </tr> 
     </tbody> 
    </table> 

No Dice:

@media print { 
     /* show cover in print */ 
     .cover { 
      display: block; 
     } 
     .dvCertWrapper { 

     } 
     .cert { 
      width: 1080px!important; 
      content: url('../Content/images/certificate.jpg'); 
      margin-left: -210px; 
      background-repeat: no-repeat; 
      background-position: right top; 
      background-attachment: fixed; 
     } 
     .certContent { 
      display: block; 
      margin-top: -680px; 
      /*margin-left: 60px;*/ 
      width: 100%; 
      text-align: center; 

      } 
     .startDate { 
      display: block; 
      font-family: "Century Schoolbook" !important; 
      font-size: 20px; 
      font-style: normal; 
      margin-top: -170px; 
      margin-left: -102px; 
      position: absolute; 
     } 
     .endDate { 
      display: block; 
      font-family: "Century Schoolbook" !important; 
      font-size: 20px; 
      font-style: normal; 
      margin-top: -10px; 
      margin-right: -60px; 
      position: absolute; 
     } 
     /* hide other elements in print */ 
     button { 
      display: none; 
     } 

     .smallText { 
      font-size: .8em; 
      width: 800px; 
     } 
     table { 
      border-collapse: collapse; 
      width: 1800px; 
     } 
    } 

My Table Def sieht wie folgt aus. Vorher habe ich folgendes versucht:

<style> 
    html, 
    body { 
     height: 100%; 
     margin: 0; 
    } 

    .cover { 
     /* hidden cover */ 
     display: none; 
     height: 100%; 
     width: 100%; 
    } 
    /* fills entire sheet of paper */ 

    .cert { 
     display: block; 
     height: 974px; 
     width: 1366px; 
     background-image: url('../Content/images/certificate.jpg'); 
     background-repeat: no-repeat; 
     background-position: right top; 
     background-attachment: fixed; 
    } 
    /* only apply when printing */ 

    @media print { 
     /* show cover in print */ 
     .cover { 
      display: block; 
     } 
     .cert { 
      width: 800px; 
      content: url('../Content/images/certificate.jpg'); 
      margin-left: -160px; 
      background-repeat: no-repeat; 
      background-position: right top; 
      background-attachment: fixed; 
     } 
     .certContent { 
      display: block; 
      font-family: "Century Schoolbook" !important; 
      font-size: 40px; 
      font-style: normal; 
      margin-top: -800px; 
      margin-left: 60px; 
      } 
     .leftDate { 
      display: block; 
      font-family: "Century Schoolbook" !important; 
      font-size: 40px; 
      font-style: normal; 
      margin-top: -10px; 
      margin-left: -60px; 
     } 
     /* hide other elements in print */ 
     button { 
      display: none; 
     } 
    } 
</style> 

<button onclick="window.print()">print</button> 
<div class="cover">COVERLETTER</div> 
<div> 
    <div class="cert"></div> 
    <div class="certContent">My Business</div> 
    <div class="leftDate">01/01/1979</div> 
</div> 

Noch nicht mal nah dran.

Mein Hintergrundbild ist Größe, 834 x 595 Pixel und ich versuche, in einem legalen Papier zu drucken.

Mein fertiges Bild sollte so aussehen. (Ich entschuldige mich für diese Grafik, ich bin kein Designer, nur in ein Wohltätigkeitsprojekt geworfen).

Die roten Kästen zeigen, wie ich möchte Serverdaten angezeigt werden soll. Alle Ideen oder Hinweise werden sehr geschätzt. Danke ...

Answer 1

Da der Druckvorgang mehr von den Systemeinstellungen des Benutzers als von der gedruckten Seite gehandhabt wird, müssen die Papierausrichtung und -größe manchmal manuell im Druckdialog festgelegt werden.
Ich habe dieses Beispiel an ein Blatt Papier angepasst.
Ich habe auch das Layout von einer Tabelle in eine Reihe von Zeilen geändert, deren Höhen sich ändern können.

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
button { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 10px 20px; 
 
} 
 
.cover { 
 
    display: none; 
 
    height: 8.5in; 
 
    width: 14in; 
 
} 
 
.cert { 
 
    display: block; 
 
    height: 8.5in; 
 
    width: 14in; 
 
    max-width: 14in; 
 
    max-height: 8.5in; 
 
    position: relative; 
 
} 
 
.cert-img { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.cert-content { 
 
    height: calc(100% - 1.6in); 
 
    width: calc(100% - 2.8in); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0.8in 1.4in; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.row { 
 
    width: 100%; 
 
    display: inline-block; 
 
    color: black; 
 
    font-size: 20pt; 
 
    display: flex; 
 
} 
 
.row span, 
 
.row .v-stack { 
 
    flex: 1; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.row-padding { 
 
    height: 0.4in; 
 
} 
 
.val { 
 
    color: red; 
 
} 
 
#valid-to, 
 
#valid-to-value, 
 
#addr-2 { 
 
    text-align: right; 
 
} 
 
#tax-license, 
 
#sig { 
 
    text-align: center; 
 
} 
 
.row-2 { 
 
    margin-bottom: 0.3in; 
 
} 
 
.holder { 
 
    text-align: center; 
 
} 
 
.row-3 { 
 
    margin-bottom: 0.3in; 
 
} 
 
.row-4 table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    font-size: 18pt; 
 
} 
 
.row-5 { 
 
    height: 2in; 
 
    flex: 1; 
 
} 
 
.row-5 p { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.row-6 { 
 
    margin-bottom: 0.5in; 
 
} 
 
@page { 
 
    margin: 0; 
 
    size: 14in 8.5in landscape; 
 
} 
 
@media print { 
 
    .cover { 
 
    display: block; 
 
    } 
 
    button { 
 
    display: none; 
 
    } 
 
}

<div class="cover">hello again!</div> 
 
<section class="cert"> 
 
    <img class="cert-img" src="https://i.stack.imgur.com/JwmVt.png" /> 
 
    <div class="cert-content"> 
 
    <div class="row row-0 row-padding"></div> 
 
    <div class="row row-1"> 
 
     <span id="valid-from">valid from</span> 
 
     <span id="tax-license">tax license <span class="val" id="tax-license-value">000000</span></span> 
 
     <span id="valid-to">valid to</span> 
 
    </div> 
 
    <div class="row row-2"> 
 
     <span class="val" id="valid-from-value">date</span> 
 
     <span class="val" id="valid-to-value">date</span> 
 
    </div> 
 
    <div class="row row-3"> 
 
     <span class="holder val">holder name</span> 
 
    </div> 
 
    <div class="row row-4"> 
 
     <table class="val"> 
 
     <tr> 
 
      <td>Allowed to sell</td> 
 
      <td>Allowed to sell</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Allowed to sell</td> 
 
      <td>Allowed to sell</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <div class="row row-5"> 
 
     <p>The business named above...</p> 
 
    </div> 
 
    <div class="row row-6"> 
 
     <div class="v-stack" id="addr-1"> 
 
     <ul> 
 
      <li>pobox</li> 
 
      <li>addr</li> 
 
     </ul> 
 
     </div> 
 
     <span class="val" id="sig"><img />signature</span> 
 
     <div class="v-stack" id="addr-2"> 
 
     <ul> 
 
      <li>pobox</li> 
 
      <li>addr</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<button onclick="window.print()">Print</button>