ページ上の選択したアイテムのみを印刷する

Question

ダイナミックに生成されたページにトリッキーな印刷機能を提供するよう依頼されました。このページでは、各レコードをチェックボックスとともに表示します。次に、ページの下部にある1つの印刷ボタン。このアイデアは、ユーザーが印刷したい各レコードの横にあるボックスをチェックさせ、ページの下部にある印刷ボタンをクリックすると、選択されたレコードだけが印刷されるようにすることです。

CSSとJavascriptの組み合わせが必要であると仮定していますが、実際はわかりません。何か案は？前もって感謝します！

Answer 1

PHPソリューション

あなたは

<form method="post" action="print.php"> 
    <p>Select the records to be printed</p> 
    <p> 
    <input type="checkbox" name="records[]" value="1"><div class="record">Record 1</div><br> 
    <input type="checkbox" name="records[]" value="2"><div class="record">Record 2</div><br> 
    <input type="checkbox" name="records[]" value="3"><div class="record">Record 3</div> 
    </p> 
</form> 

のようなものを持っている場合は、自動的にPHPスクリプトprint.phpで、その中に選択されたレコードのすべての値を持つ配列$_POST['records']を取得します。

（これが唯一のすべてのチェックボックスの名前が同じであれば動作し、[]で終わることに注意してください）、その後のような何か行うことができますPHPスクリプト：

<?php 
foreach ($record in $_POST['records']) { 
    // fetch the record with id $record from the database (or similar) 
    // print this record to the page 
} 
echo "<script>window.print();</script>"; // or put that into the onload attribute of the body tag 
?> 

JavaScriptとCSS

を他の有効な可能性は、javascriptを使ってすべてのことをすることです。したがって、印刷ボタンをクリックしたときにチェックされ、チェックされていないすべてのレコードが削除または非表示になると、すべてのチェックボックスをチェックする必要があります。

有用なのは、特定のデバイスにのみ適用される余分なスタイルを定義できるCSSプロパティmediaです。私はサファリ（疑似クラスでそれをテストしている

@media print { 
    input{ 
     display: none; /* hides all input elements for the printer */ 
    } 
    .record { 
     display: none; /* hide all records by default */ 
    } 
    input[checked] + .record, input:checked + div.record { 
     /* display all that are immediately preceeded by a input with checked attribute */ 
     display: block; 
    } 
} 

注：このコードは、あなたの印刷ボタンで属性onclick="window.print()"以外の任意のJavaScriptせずにすべてを行うことができるようsould希望の結果にリードをチェックしていない属性セレクタ）、css3とselectorをサポートする新しいバージョンのブラウザでのみ動作します。

Answer 2

（選択したチェックボックスを使用して）フォームを投稿するprint.phpを作成します。ページには、選択したコンテンツのみが表示され、印刷された状態で表示され、javacript window.print() onloadが呼び出されます。