1

いくつかの div を含む Web ページがあります。ユーザーは、1 つの div (選択したコンテンツ) またはページ全体を印刷できる必要があります。ユーザーがページ全体を印刷する場合、ヘッダー、フッターなどを維持する必要があります。1 つのセクションまたはページ全体を印刷するように設定できますが、両方を適切に印刷する方法がわかりません。私の現在のCSSは、次のように@mediaプリントを使用しています:

  @media print
   {
    body * { visibility: hidden; }
    .printArea * { visibility: visible; }
   }

jQuery を使用printAreaして、選択したセクションにクラスを追加し、window.print() を呼び出しました。

$("a.printSection").live("click", function(){
    //the id of the sectionToPrint is actually passed in via metadata plug-in
    $("div#sectionToPrint").addClass('printArea');
    window.print();
});

本文にクラスを追加および削除しようとしましたが、問題は、ジョブが実際に印刷される前に jQuery がクラス名を削除することです。セクションまたはページ全体を印刷する方法についてのアイデアはありますか? 本当の問題は、セクションを印刷してから ctrl + p を使用して印刷するときに発生します。

よろしくお願いします！

4

1 に答える 1

2

まず、コンテンツをヘッダーとフッターから分離する必要があります。次のコードを使用して、実際の例を確認してください。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" 
           src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script type='text/javascript'>
            var isSelected = false;

            // To print the entire page
            function printAll() {
                $('style[media=\"print\"]').remove();
                isSelected = false;
            }
            // To print the slected content
            function printSelected() {
              if(!isSelected) {
                $('<style type=\"text/css\" media=\"print\">body{visibility:hidden}\
                     .printArea{visibility:visible}</style>').appendTo('head');
                     isSelected = true;
                }
            }
        </script>
    </head> <body>
        <a href="#" onclick="printAll();return false;">Print All</a>
        <a href="#" onclick="printSelected(); return false;">Print Selected</a>
        <div id="header"> header content here </div>
        <div id="content">
            body content outside the print area
            <div class="printArea">body content inside the print area</div>
            more body content outside the print area
         </div>
        <div id="footer"> footer content here </div>
    </body>
</html>

これが役立つことを願っています。

于 2012-07-03T01:53:24.677 に答える