57

Bootstrap を使用して、さまざまな製品に関する情報を含む 28 のモーダル ウィンドウを持つサイトを開発しています。開いているモーダルウィンドウに情報を印刷できるようにしたい。各ウィンドウにはid.

<!-- firecell panel & radio hub -->
           <div class="modal hide fade" id="fcpanelhub">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h3>5000 Control Panel & Radio Hub</h3>
              </div>
              <div class="modal-body">
                <img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
              </div>    
           </div>

したがって、modal-footer「印刷」に新しいボタンを追加してクリックすると、そのモーダルが印刷されます。JavaScriptが使用されると言うのは正しいでしょうか？もしそうなら、開いているモーダルのみを印刷し、他のモーダルを印刷しないようにjavascriptに指示するにはどうすればよいですか?

すべての助けに感謝します。

4

11 に答える 11

78

別の解決策

これは、以下で説明されているのと同じ質問でのBennett McElwee の回答に基づく新しいソリューションです。

IE 9 & 10、Opera 12.01、Google Chrome 22、Firefox 15.0 でテスト済み。
jsFiddle の例

1.) この CSS をサイトに追加します。

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

2.) JavaScript 関数を追加する

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChild(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}​

サイトの要素を印刷する準備ができました! 要素を
呼び出して、終了したら実行するだけです。printElement()window.print()

注: 印刷する前に (印刷版のみ) コンテンツを変更する場合は、次の例を確認してください (waspina がコメントで提供): http://jsfiddle.net/95ezN/121/

また、CSS を使用して、追加のコンテンツを印刷版 (および印刷版のみ) に表示することもできます。

以前のソリューション

CSS を使用して、サイトの他のすべての部分を非表示にする必要があると思います。

すべての印刷不可能なコンテンツを別の に移動するのが最善DIVです:

<body>
  <div class="non-printable">
    <!-- ... -->
  </div>

  <div class="printable">
    <!-- Modal dialog comes here -->
  </div>
</body>

そして、あなたのCSSで：

.printable { display: none; }

@media print
{
    .non-printable { display: none; }
    .printable { display: block; }
}

クレジットは、同様の質問にすでに回答しているGregに贈られます: Print <div id="printarea"></div> only?

JavaScript の使用には1 つの問題があります。ユーザーはプレビューを表示できません (少なくとも Internet Explorer では!)。

于 2012-08-29T15:51:12.730 に答える
9

これは、受け入れられた回答のコメントにある waspinator のコードに基づいて作成した JQuery 拡張機能を使用するオプションです。

jQuery.fn.extend({
    printElem: function() {
        var cloned = this.clone();
        var printSection = $('#printSection');
        if (printSection.length == 0) {
            printSection = $('<div id="printSection"></div>')
            $('body').append(printSection);
        }
        printSection.append(cloned);
        var toggleBody = $('body *:visible');
        toggleBody.hide();
        $('#printSection, #printSection *').show();
        window.print();
        printSection.remove();
        toggleBody.show();
    }
});

$(document).ready(function(){
    $(document).on('click', '#btnPrint', function(){
        $('.printMe').printElem();
    });
});

JSFiddle: http://jsfiddle.net/95ezN/1227/

これは、これをすべての印刷に適用するのではなく、カスタム印刷ボタン (私の場合) に適用したくない場合に役立ちます。

于 2016-10-10T10:27:51.833 に答える
8

このjQueryプラグインの印刷要素を試してみることをお勧めします

選択した要素を印刷するだけです。

于 2012-08-29T15:50:54.233 に答える
4

jQuery/javascript を少しだけ使用します。

html:

<h1>Don't Print</h1>

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"      aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal to print</h3>
  </div>
  <div class="modal-body">
    <p>Print Me</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="printButton">Print</button>
  </div>
</div>

js:

$('#printButton').on('click', function () {
    if ($('.modal').is(':visible')) {
        var modalId = $(event.target).closest('.modal').attr('id');
        $('body').css('visibility', 'hidden');
        $("#" + modalId).css('visibility', 'visible');
        $('#' + modalId).removeClass('modal');
        window.print();
        $('body').css('visibility', 'visible');
        $('#' + modalId).addClass('modal');
    } else {
        window.print();
    }
});

ここにフィドルがあります

于 2014-11-04T20:15:24.117 に答える
1

Javascript やプラグインを使用しないソリューションを次に示します。マークアップに css と追加のクラスを 1 つ追加するだけです。このソリューションは、ダイアログが開いているときに BootStrap がボディにクラスを追加するという事実を利用しています。このクラスを使用して本文を非表示にし、ダイアログのみを印刷します。

ページのメイン ボディを確実に決定できるようにするには、メイン ページ コンテンツ内のすべてを div に含める必要があります。私は id="mainContent" を使用しました。以下のページ レイアウトの例 - メイン ページと 2 つのダイアログを含む

<body>
 <div class="container body-content">

  <div id="mainContent">
       main page stuff     
  </div>
  <!-- Dialog One -->
  <div class="modal fade in">
   <div class="modal-dialog">
    <div class="modal-content">
          ...
    </div>
   </div>
  </div>

  <!-- Dialog Two -->
  <div class="modal fade in">
   <div class="modal-dialog">
    <div class="modal-content">
          ...
    </div>
   </div>
  </div>

 </div>
</body>

次に、CSS 印刷メディア クエリで、display: none を使用して、表示したくないもの、つまり、ダイアログが開いているときの mainContent をすべて非表示にします。また、特定のクラス noPrint を使用して、表示してはならないページの任意の部分 (アクション ボタンなど) で使用します。ここでは、ヘッダーとフッターも非表示にしています。必要に応じて正確に調整する必要がある場合があります。

@media print {
    header, .footer, footer {
        display: none;
    }

    /* hide main content when dialog open */
    body.modal-open div.container.body-content div#mainContent {
        display: none;
    }

    .noPrint {
        display: none;
    }
}
于 2015-09-01T14:20:58.473 に答える
0

問題 1 の 2 つの問題に直面していました。すべてのフィールドが次々と表示され、問題 2 はポップアップから印刷するときにページの下部に空白が表示されます。

私はこれを解決しました

すべての body * 要素に display none を設定します

    @media print {
        body * {
           display:none;
        width:auto;
        height:auto;
        margin:0px;padding:0px; 
        }
        #printSection, #printSection * {
            display:inline-block!important;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;  
            margin:0px; 
            page-break-before: none;
            page-break-after: none;
            page-break-inside: avoid;      
        }
#printSection .form-group{

      width:100%!important;
      float:left!important;
      page-break-after: avoid;
    }
#printSection label{
        float:left!important;
        width:200px!important;
        display:inline-block!important;
      }

#printSection .form-control.search-input{
        float:left!important;
        width:200px!important;
        display: inline-block!important;
      }
}
于 2016-10-07T09:45:08.617 に答える
0

そのため、複数のレガシー サイトで Web コンポーネントとして動作する反応アプリがあります。これらのソリューションはどれも、まさに私が探していたものではありませんでした。受け入れられた答えには欠点があります。次の CSS があるとします。

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

body * {visibility : hidden}ユーザーが CTRL+P を押した場合にページを印刷できないようにします。

これは、ユーザーが同じページにあるモーダルとドロワーからページを印刷する必要がある場合に備えて、複数の印刷 UX ワークフローも考慮していません。これはまれなケースですが、これも考慮されていません

ソリューション

私が代わりに選んだ解決策は、本体に最上位の CSS クラスを適用することです。React Modal コンポーネントでは、useEffect 呼び出しを使用します

import React, { useEffect } from 'react'

export const ModalPane = (props) => {
  useEffect(() => {
    const body = document.querySelector('body')
    if (body) {
      body.classList.add('hide-on-print')
    }
    return () => {
      if (body) {
        body.classList.remove('hide-on-print')
      }
    }
  }, [])

  const handlePrint = () => {
    // add any prework or analytics tracking here etc
    window.print()
  }

  return (
    <div className="print-me">
      <h1>Modal content stuff here</h1>
      <button type="button" onClick={handlePrint}>Print</button>
    </div>
  )
}

このモーダルがレンダリングされると (つまり、ユーザーが目的のモーダルを見ている場合)、モーダルのコンテンツのみが出力されます。印刷ボタンを押すか、CTRL + P を押すかは関係ありません。

hide-on-printこれにより、 body 要素で呼び出されたクラスが適用されます。次に、このメディア スタイルが適用されます。これは、この印刷 UX インスタンス専用にスコープが設定されています (他の特定の印刷クエリのボディにクラスを追加できます)。

@media print {
  body.hide-for-print {
    visibility: hidden !important;
  }
  body.hide-for-print .print-me {
    visibility: visible;
  }
}

TLDR

hide-for-printレンダリングされたときにのみクラスを適用するreact useEffectコンポーネントを使用します。このクラスの後ろに @print メディア クエリをラップします。これは、意図されたすべてのUX印刷ユースケースを処理し、他の特定の印刷UXケースに拡張できます

于 2021-06-24T15:34:14.863 に答える