2

Web サイトに printUsers.html というページがあります。
その上に、「javascript:window.print()」を使用してページを印刷するボタンがあります。
また、ページの印刷時にいくつかのボタンを非表示にするために、ページで「@media print」を使用しています。
これはすべてうまく機能しており、ここで問題はありません。

問題は次のとおりです
。サイトのすべてのページがメイン ページから拡張されています。したがって、printUsers.html の上部には次のものがあります。
#{extends 'App/main.html' /}

これには、スタイルと、ボタンとドロップダウンを持つヘッダーが含まれます。
ユーザーが印刷ボタンをクリックすると、main.html からのヘッダーやボタンなどをすべて非表示にしたいと考えています。
私はそれをdivにラップし、IDを与えて隠してみましたが、うまくいきませんでした。

私はJavaScriptを使い始めたばかりなので、助けていただければ幸いです。
ありがとう。

4

3 に答える 3

6

CSSのやり方

@メディアプリント

質問で述べたように使用@media Printしますが、印刷結果に表示したくないすべての要素を含めて、それらに配置display:noneします。margin:0 auto; text-align:center;ページの中央に配置したい場合は、メイン コンテンツに一部を適用することもできます。

編集:次のように、任意の要素を非表示にできますheader。

header
{
    display:none;
}

footer
{
    display:none;
}

Javascript の方法

ボタンの onClick

ボタンのオンクリック:

ボタン onClick()

<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"

ヘッダー (またはページの最後) の JavaScript コード

Javascript

function printPage()
{
    var myDropDown = document.getElementById('myDropDown');
    myDropDown.style.display = "none";
    //Whatever other elements to hide.
    window.print();
    myDropDown.style.display = "block";
    return true;
}

これらの要素をすべて配列に入れて、それらfor ... in ...を表示/非表示にするループを作成することもできます。

于 2013-01-08T14:50:32.610 に答える
1

非表示にするすべてのものをカプセル化する要素でコンテンツをラップします。print CSS で、表示を none に設定します。

CSS:

@media print {
    #myHeader, #myFooter { display: none }
}

HTML:

<div id="myHeader">
  <ul>
    <li>
      <a>My link</a>
   </li>
 </ul>
</div>
<div id="myContent">
  <p>This will print fine</p>
</div>
<div id="myFooter">
  <p>This will not print</p>
</div>

HTML5 ヘッダー/フッター要素はいつでも使用できます。

于 2013-01-08T14:47:19.433 に答える
0

他の div を非表示にするのではなく、特定の div のみを印刷するという反対の方法を試してください: <div id=printarea></div> のみを印刷しますか?

于 2013-01-08T14:41:03.637 に答える