事前にデータを入力してDivを印刷してから、非表示のdivを印刷する

Question

この質問があいまいになる場合は、事前にお詫びします。 古いSilverlightアプリケーションをhtml/web APIアプリケーションに移植しています。

このアプリケーションでは、さまざまなベンダーがソブリン族の企業にライセンスを申請することができます。その後、ライセンスが発行されるとライセンスを印刷することができます。

ライセンスは、ライセンスのテキストのほぼ100％がデータベースから来るこの

ようになります。

私は、HTMLテーブルを作成し、証明書イメージとしてテーブルの背景を設定し、セルを使用してサーバーからテキストを配置することを考えています。

しかし、私はいくつかの理由で壁にぶつかった 1）ライセンスは、印刷ボタンのように、フルページとライセンスのみをサイトの残りの部分で印刷する必要がありません。 2）ライセンスが印刷される前に、隠しdivの中にカバーレターを印刷する必要があります。

理想的には、ユーザーがボタンをクリックしてカバー文字を印刷し、適切にフォーマットされたライセンスが印刷されます。

ご意見やご提案は大歓迎です。

おかげ

Answer 1

あなたは、文書だけでなく、見て印刷する場合にのみスタイルを適用するCSSの@mediaを使用することができます。

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>