web-dev-qa-db-ja.com

Twitter Bootstrap：モーダルウィンドウのコンテンツの印刷

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-'print'に新しいボタンを追加し、それをクリックすると、そのモーダルを印刷することができます。 javascriptが使用されると言うのは正しいでしょうか？もしそうなら、どのようにしてjavascriptに開いているモーダルのみを印刷し、他のモーダルを印刷しないように指示するのですか？

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

javascriptprintingtwitter-bootstrapmodal-dialog
46
MattSull

別の解決策

以下に示す 同じ質問 の Bennett McElwee answer に基づいた新しいソリューションがあります。

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では！

61
ComFreek

このjQueryプラグインを試すことをお勧めします print element

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

8
maxisam

現在受け入れられているソリューションでは、ダイアログ自体を含むページを印刷できなくなりました。はるかに動的なソリューションを次に示します。

JavaScript：

$().ready(function () {
    $('.modal.printable').on('shown.bs.modal', function () {
        $('.modal-dialog', this).addClass('focused');
        $('body').addClass('modalprinter');

        if ($(this).hasClass('autoprint')) {
            window.print();
        }
    }).on('hidden.bs.modal', function () {
        $('.modal-dialog', this).removeClass('focused');
        $('body').removeClass('modalprinter');
    });
});

CSS：

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

    body.modalprinter .modal-dialog.focused {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        top: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content {
        border-width: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body * {
        visibility: visible;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header,
    body.modalprinter .modal-dialog.focused .modal-content .modal-body {
        padding: 0;
    }

    body.modalprinter .modal-dialog.focused .modal-content .modal-header .modal-title {
        margin-bottom: 20px;
    }
}

例：

<div class="modal fade printable autoprint">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="window.print();">Print</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
8
dtrunk

受け入れられた回答のコメントの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/

これは、これをすべての印刷に適用せずに、カスタム印刷ボタンで行うだけの場合に役立ちます（私の場合）。

6
bostero2

これは修正されたソリューションで、Grailsテンプレートを使用してレンダリングされたモーダルウィンドウでも機能します。Grailsテンプレートでは、同じボディに同じモーダルテンプレートを複数回（異なる値で）呼び出すことができます。このスレッドは私を非常に助けてくれたので、他のGrailsユーザーがここで見つけた場合に備えて共有したいと思いました。

好奇心are盛な人にとっては、テーブルをレンダリングしているため、受け入れられた解決策はうまくいきませんでした。各行には、レコードに関する詳細を表示するモーダルウィンドウを開くボタンがあります。これにより、複数のprintSection divが作成され、互いの上に印刷されました。そのため、印刷後にdivをクリーンアップするためにjsを修正する必要がありました。

CSS

このCSSをモーダルgspに直接追加しましたが、親に追加しても同じ効果があります。

<style type="text/css">
   @media screen {
        #printSection {
           display: none;
        }
   }

   @media print {
        body > *:not(#printSection) {
           display: none;
        }
        #printSection, #printSection * {
            visibility: visible;
        }
        #printSection {
            position:absolute;
            left:0;
            top:0;
        }
   }
</style>

サイト全体のCSSに追加すると、サイトの他の部分の印刷機能が無効になります。私はこれを ComFreak の受け入れられた回答（ Bennett McElwee answer に基づく）から取得しましたが、 fanfavorite の '：not'機能を使用して修正されました Print <div id = printarea> </ div> only？ に関する回答私の目に見えない体のコンテンツが余分な空白ページを作成していたため、「表示」ではなく「表示」を選択しましたが、これはユーザーには受け入れられませんでした。

js

そして、この質問に対する ComFreak の受け入れられた回答から改訂された私のjavascriptへのこれ。

function printDiv(div) {    
    // Create and insert new print section
    var elem = document.getElementById(div);
    var domClone = elem.cloneNode(true);
    var $printSection = document.createElement("div");
    $printSection.id = "printSection";
    $printSection.appendChild(domClone);
    document.body.insertBefore($printSection, document.body.firstChild);

    window.print(); 

    // Clean up print section for future use
    var oldElem = document.getElementById("printSection");
    if (oldElem != null) { oldElem.parentNode.removeChild(oldElem); } 
                          //oldElem.remove() not supported by IE

    return true;
}

要素を追加する必要がなかったので、その側面を削除し、特にdivを印刷するように関数を変更しました。

HTML（gsp）

そしてモーダルテンプレート。これにより、モーダルヘッダーと本文が印刷され、ボタンが配置されていたフッターが除外されます。

<div class="modal-content">
    <div id="print-me"> <!-- This is the div that is cloned and printed -->
        <div class="modal-header">
            <!-- HEADER CONTENT -->
        </div>
        <div class="modal-body">
             <!-- BODY CONTENT -->
        </div>
    </div>
    <div class="modal-footer">
                                 <!-- This is where I specify the div to print -->
        <button type="button" class="btn btn-default" onclick="printDiv('print-me')">Print</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

私はそれが誰かを助けることを願っています！

5
Kara Johnson

私はほんの少しの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();
    }
});

ここに フィドル

3
alexoviedo999

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;
    }
}
0
Peter Kerr

このソース https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js からprintThis libをダウンロードして、 htmlページ

次のjqueryを呼び出して、表示できないコンテンツを含むすべてのコンテンツを印刷します。複数のcssファイルがある場合は、cssファイルを配列に含めることができます。

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: false,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});
0
Fouad Mekkey

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

私はこれを解決しました

display noneをすべてのbody *要素に作成します。それらのほとんどは可視性を非表示にします。

    @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;
      }
}
0
Nadeemmnn Mohd