web-dev-qa-db-ja.com

jqueryを使用した自動印刷

私は次の形式のデータを持っています：

（ダミーエントリ）（id = posGridView）

enter image description here

販売を処理すると、すべての列ではなく、選択した列で小さなレシートが自動的に印刷されます。

このグリッドビューではすべてのデータを利用できるため、jqueryを使用して任意の形式で動的に印刷するにはどうすればよいですか？

編集済み

実は上のグリッドビューからダイナミックにこのフォーマットで印刷したい

enter image description here

jqueryprintingdatagridviewjquery-datatables
8
Shahid Ghafoor

印刷

ページを印刷するためにjQueryは必要ありません。必要なのは、JavaScript関数window.print();だけです。

特定のコンテンツを印刷する必要がある場合は、CSSで残りを非表示にする（および印刷領域をフォーマットする）ことができます。

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

ご覧のとおり、スタイルタグのmedia属性を設定することで、通常のビュー（画面）と印刷ビュー（印刷）の両方のスタイルを設定できます。完全な記事は ここ です。

ダイナミズム

プロセスに特定のダイナミズムを追加できますが、ユーザーにとっては動的になる可能性があることに注意してください。ただし、コードでは印刷を添付するには、イベントを見つけてする必要があります。そのイベントは、アンカーのクリックである可能性があります。

<a href='javascript:window.print();'>Print</a>

それはあなたのページのonloadイベントである可能性があります：

_window.onload = function () {
    window.print();
}
_

または、注意が必要なその他のイベント（現在、jQueryを使用していることに注意してください）：

_var doPrintPage;

function printPage(){
    window.print();
}

$(document).ready(function(){
    $('input').blur(function(){
        //3sec after the user leaves the input, printPage will fire
        doPrintPage = setTimeout('printPage();', 3000);
    });
    $('input').focus(function(){
        //But if another input gains focus printPage won't fire
        clearTimeout(doPrintPage);
    });
});
_

上記のコードは非常に単純です。ユーザーが入力を離れてから3秒後に、printPageが起動します。入力がこれらの3秒間にフォーカスを取得した場合、printPageは呼び出されません。この正確なコードが必要なものだとは思いませんが、ダイナミズムをエミュレートする方法を説明します。 setTimeout および clearTimeout の定義を確認できます。

編集：上記で説明したように、印刷したくないhtmlをCSSで非表示にして、window.print。とにかく、ここで私は新しいページを通してそれを行うためのいくつかのコードを追加しています。

新しいページからの印刷

表示しているページとはまったく異なるページからfromを印刷する場合は、そのページを要求し、サーバー側でHTMLを管理してから、ページに通知することができます。ロードされるとすぐに印刷します。これを行うには、少なくとも2つの方法があります。それらを段階的に見てみましょう：

A）最初の選択肢は、GridViewを新しいページに送信し、そこから印刷することです。問題は、これを行うために新しいページを簡単に開くことができないことです。そのため、ページから印刷するhtmlを表示する新しいページを参照する必要があります。

A1）このためには、GridViewを次のフォームで囲む​​必要があります。

_<form runat="server">
<asp:GridView id="gridView" />
<asp:Button id="btnPrint" Text="Print" runat="server" OnClick="btnPrint_Click" />
</form>
_

A2）次に、* btnPrint_Click *から「printPage.aspx」を呼び出します。 JS/jQueryを使用してGridViewを変更した場合、それらの変更を利用できない可能性があることに注意してください（.NETがGridViewではなく非表示の状態変数を読み取る可能性があるため）。

B）それを行う2番目の方法はJavaScriptを使用することです。ただし、この選択では、新しいページでテーブルを編集するのに苦労することに注意してください（GridViewを受信しないため、htmlを受信します）。良い点は、新しいページを簡単に開くことができることです。

B1）もちろん、次のようなフォーム（ターゲットとアクションに注意）が必要になります。

_<form id="myPageForm" name="myPageForm" target="_blank" action="printPage.aspx">
    <input type="hidden" name="htmlToPrint" id="htmlToPrint" />
    <input type="button" value="submit">Print</button>
</form>
_

B2）次に、データをそのアンカーに渡す必要があります。フォームを送信する前に、テーブルデータを使用して入力を設定します。

_$(document).ready(function(){
    $('#myPageForm').submit(function(){
        //Filling the hidden input
        var htmlToPrint = $(".posGridView").html(); //I'm using a class and not an ID 'cause .NET will change your GridView's ID when rendering you page
        $("#htmlToPrint").value(htmlToPrint);
        return true;
    });
});
_

サーバー側（printPage.asx）にデータを取得したら、印刷するHTMLを簡単に作成し、そのページonloadでwindow.print（）を呼び出すことができます。上記の。

28
Ale