Drucken eines Div mit vorgefüllten Daten und Drucken eines versteckten div

Question

Ich entschuldige mich im Voraus, wenn diese Frage vage erscheint. Ich portiere eine ältere Silverlight-Anwendung in eine HTML/Web-API-Anwendung.

Die Anwendung ermöglicht es verschiedenen Anbietern, Lizenzen für Geschäfte mit einem souveränen Stamm zu beantragen und ihnen dann die Möglichkeit zu geben, eine Lizenz zu drucken, sobald sie für sie in Frage kommt.

Die Lizenz sieht so etwas wie dieses

Fast 100% des Textes in der Lizenz aus der Datenbank kommt.

Eine Idee, die ich habe, ist eine HTML-Tabelle zu erstellen und den Hintergrund für den Tisch, als das Zertifikat Bild gesetzt, dann Zellen verwenden Sie den Text aus dem Server zu positionieren.

Allerdings habe ich aus mehreren Gründen eine Wand getroffen, 1) Lizenz muss die ganze Seite drucken und nur die Lizenz nicht den Rest der Website, wie die Schaltfläche Drucken. 2) Bevor die Lizenz druckt, ich brauche ein Anschreiben zu drucken, die in einem versteckten div ist.

So ideal, klickt Benutzer auf eine Schaltfläche und aus druckt ein Anschreiben durch die Lizenz gefolgt richtig formatiert.

Alle Hinweise oder Anregungen sind sehr willkommen.

Dank

Answer 1

Sie css @media Stile gelten nur das Dokument beim Drucken und nicht, wenn nur sehen können:

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

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

 
.cert { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
/* only apply when printing */ 
 

 
@media print { 
 
    /* show cover in print */ 
 
    .cover { 
 
    display: block; 
 
    } 
 
    /* hide other elements in print */ 
 
    button { 
 
    display: none; 
 
    } 
 
}

<button onclick="window.print()">print</button> 
 
<div class="cover">COVERLETTER</div> 
 
<div class="cert">CERTIFICATE</div>