2

たとえば、次のテーブルがあります。テーブルだけに印刷機能を追加するにはどうすればよいですか? クリックすると、次の表がプリンターで印刷されるボタン

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
4

5 に答える 5

5

新しいスタイル シート print.css を作成し、CSS media=print を設定する必要があります。

例えば ​​：

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style>

<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

印刷するセクションに「yesPrint」にクラスを追加します

<div class= "yesPrint">
 <table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>
 </div>

ここでボタンを追加します

<input TYPE="button" onClick="window.print()">

詳細については: http://www.codeproject.com/KB/HTML/Printing_with_CSS.aspx

于 2012-04-16T12:07:39.023 に答える
2

私はこの機能を使用します： 

<script type="text/javascript">
function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data)
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title></title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body style="direction:rtl;"><pre>');
        mywindow.document.write(data);
        mywindow.document.write('</pre></body></html>');
        mywindow.document.close();
        mywindow.print();
        return true;
    }
</script>

必要に応じて変更できます。
実際、この要素を含む新しいウィンドウを開き、それを印刷します。

于 2012-04-16T12:08:33.070 に答える
1

1 つの方法は、テーブルを新しいページで開くことです。これは、フォームを新しいページに送信する JavaScript を使用して行うことができ、テーブルの作成に必要なすべての変数を渡します。

<form name = "theform" .... >
<input type = "hidden" name = "something" value = "importantdata">
  ... stuff
</form>

<script type = "text/javascript">
submit('theform')
</script>

次に、ボタンとともに新しいページにテーブルを生成するコードを配置します。ボタンが必要ない場合でも、html コード内で JavaScript 関数を参照するだけで印刷関数を呼び出すことができます。

<script type = "text/javascript">
printit()
</script>

javascript window.open() メソッドを使用して、新しいページでテーブルを開くこともできます。これは、新しいウィンドウに渡す変数があまりない場合に適した方法です。JavaScript関数で設定できるurl変数を介して、いくつかの小さなものを渡すことができます。

また、同じページにとどまり、ユーザーが何かをクリックして、テーブル以外のすべての表示を削除できるというアプローチも使用しました。これは、取り外し可能なものを div でラップすることによって行われます

<div id= "remove">
   stuff
</div>

ユーザーがクリックすると、起動された JavaScript 関数がその ID の表示を「なし」に設定します。

document.getElementById('remove').style.display = 'none';

もう一度クリックすると、表示が復元されます。クリックはボタン上である必要はありません。レポートの見出しに使用したので、レポート自体以外はすべて消えてしまいました。テーブルセルの1つに配置できます。

いずれにせよ、window.print() メソッドは、プリンターのウィンドウを開くだけです。その後、ユーザーは必要に応じて印刷ジョブを設定したり、プリンターがオンになっていることを確認したりできます。

于 2013-07-20T04:29:50.163 に答える
0

js方法：（表だけを印刷することはできません）

<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>

c#仕方 ：

スタイルまたは Crystal レポートを使用して、新しいページまたはコンテナーを開き、c# コマンドを使用して印刷する必要があります。

于 2012-04-16T12:06:07.120 に答える
0

実際に印刷できるのは表だけです。JavaScript マジックが必要です (このページに触発されました)。アイデアは、新しいページ (JS-window 要素) を開き、そのページにテーブルを挿入して印刷するというものです。おそらく、異なるブラウザーでは移植性の問題がいくつかあります。また、一部のブラウザはおそらくポップアップについて不平を言うでしょうが、ええ..理論的には動作するはずです. :-)

コードは次のようになります。

<script type="text/javascript">
  var win = window.open(); // We create the window

  win.document.open(); // We open the window (popup-warning!)
  win.document.write("<h1>Hello world</h1>"); // Insert table here <--

  win.print(); // Print the content
  win.close(); // Close down the page
</script>
于 2012-04-16T12:12:50.723 に答える