7

私のウェブサイトのページの1つ（phpでコード化）に、それぞれがウェブページの一部を印刷する2つ（さらに多く）の印刷ボタンを追加しようとしています。たとえば、ページには、いくつかの値とその下に2つのグラフがあるテーブルがあります。2つの印刷ボタンを追加します。1つはテーブルを印刷し、もう1つは両方のグラフを印刷します。この例を見つけましたが、はっきりと理解できませんでした。どんな助けや例も私を助けてくれるでしょう。

前もって感謝します。

4

5 に答える 5

16

これは、クリックするとブラウザの[印刷]ダイアログを起動するhtml/javascriptコードです。

<button onClick="window.print()">Print this page</button>
于 2012-07-24T15:27:47.213 に答える
8

テーブルがid='printTable'のdiv内にある場合は、次を使用します。

<a href="#null" onclick="printContent('printTable')">Click to print table</a>

編集：これが関数「printContent（）」です

<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>
于 2012-07-24T15:39:06.393 に答える
6

簡単なアイデアは、いくつかの以前のcss印刷ルールをアドホックに作成することです。

.printtable * { display : none; }
.printtable table { display : block; }

と

.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }

次に、2つのボタンで、ステートメントの直前にbody要素（またはテーブルとグラフを含む他の要素）.printtableのクラスを追加する必要があります。.printtableandgraphwindow.print()

（ユーザーが同じ印刷ボタンを2回以上クリックした場合は、要素がすでにそのクラス名を設定しているかどうかを事前に確認してください）

于 2012-07-24T15:35:49.580 に答える
2

印刷ボタン

<button onClick="window.print()">Print this page</button>`

このコードを使用して、すべてのボタンとメニューバーを印刷する1つのドローバックしかないWebページを印刷します。

于 2016-03-15T11:44:57.747 に答える
0

ページの一部を印刷するには、print.cssと印刷ボタンを使用してすばやく簡単にアプローチできます。

  1. print.cssファイルを設定し、以下を含めます。

     body {visibility:hidden;}
     .print {visibility:visible;}

  1. ページの適切な部分に.printクラスを追加します。

  2. 追加ボタン：

<button onClick="window.print()">Print this page »</button>

印刷結果はきちんときれいです。

于 2018-11-07T17:14:32.647 に答える