7

ここに私の問題があります window.print を実装するコードがありますが、ウィンドウの印刷を閉じてページに戻ると、印刷ボタンが機能しなくなります。

$(function(){
    $('#button1').click(function()
        {
          $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
           var printContents = document.getElementById('data').innerHTML;
           var originalContents = document.body.innerHTML;
           document.body.innerHTML = printContents;
           window.print();
           document.body.innerHTML = originalContents;
           //window.location = document.body.innerHTML;       
           //location.reload(); 
        });
     });

しかし、追加するとlocation.reload()（コメントを参照）、印刷ボタンが再び機能しますが、現在のデータではなく以前のデータがロードされるため、location.reload(). 私の問題に対する他の解決策またはアプローチはありますか?

4

3 に答える 3

3

これには実際には印刷固有の CSS スタイルシートを使用する必要がありますが、その方法で目標を達成したい場合は、おそらく次のようにするとうまくいきます。

$(function(){
    $('#button1').click(function(){
        $('head').append('<link rel="stylesheet" href="<?php echo base_url() ?>assets/weekly/style/weekly.css" type="text/css"/>');
         var printContents = $( $('#data').html() );
         var originalContents = $('body > *').hide();
         $('body').append( printContents );
         window.print();
         printContents.remove();
         originalContents.show();
      });
 });

「data」要素の innerHTML を使用して新しい要素を作成します。body タグのすべての子を非表示にします。新しい要素を body タグに追加します。印刷します。新しい要素を削除します。元の内容をもう一度表示します。

これはまだややこしいですが、イベントを失うべきではありません。

于 2013-06-27T02:48:25.173 に答える
1

次のように、印刷したいコンテンツのみを含む新しいウィンドウを開くだけで、同様の問題を修正しました。

function printPage(htmlstring){

    var boiler  = "put any styling or js scripts here to make it look right";
        boiler += "<div id='print-page-content'>\n</div>\n";

    var PrintWindow = window.open("","newwin", height=600, width=800, toolbar=no, menubar=no");
    PrintWindow.document.write(boiler);
    $(PrintWindow.document).find("#print-page-content").append(htmlstring);
    $(PrintWindow).ready(function(){
        PrintWindow.print();
    });
}

次に、次のように呼び出します。

printPage(document.body.innerHTML);
于 2013-06-26T14:55:12.360 に答える
0

すべての回答と回答者に感謝します。本当に感謝しております。答えを追加したいだけです。これは私の友人からのものです。

最初にボタンに onlick="window.print()" を追加します

 <p><img src="images/printButton.gif" id="button1" width="100" height="75" onclick="window.print()"></p>

そして、このようなcssスタイルを追加します

<link href = 'css/print.css' rel = 'stylesheet' style = 'text/css'  MEDIA="print, handheld"/>

MEDIA="print,handheld" を忘れないでください

于 2013-06-27T07:31:22.503 に答える