web-dev-qa-db-ja.com

Webページにフォームを印刷する[印刷]ボタンを挿入する方法

したがって、次のようなページ内に単純なフォームがあったとしましょう。

<form style="text-align:center;">
    <p> STUFF </p>
</form>

ユーザーがボタンをクリックすると、ブラウザーの[印刷]ダイアログが表示されるようにボタンを追加したいのですが、どうすればよいですか?

編集:ページではなく、フォームを印刷します。

17
user2962142

ページ全体を印刷

window.print() を呼び出すボタンを追加してみてください

<input type="button" value="Print this page" onClick="window.print()">

特定の部分/コンテナをページに印刷する

<div id="print-content">
 <form>

  <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>

次に、HTMLファイルにこのスクリプトコードを追加します

<script type="text/javascript">
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        w=window.open();
        w.document.write(printContents);
        w.print();
        w.close();
    }

参照 Print <div id = "printarea"> </ div> only?

35

送信ボタンで印刷するには、これをサミットスクリプトに追加します。

<input type="button" value="Print this page" onClick="window.print()">

覚えておいてください、これはブラウザが実装したものだけをトリガーします print 機能はクライアントで利用可能です。

2
Vin

必要なのはwindow.print()です:

<form style="text-align:center;">

  <p> STUFF </p>

  <a href="#" id="lnkPrint">Print</a>
</form>

Javascript:

$( document ).ready(function() {
    $('#lnkPrint').click(function()
     {
         window.print();
     });
});
2