Twitter Bootstrap: Drukuj zawartość okna modalnego

Sugerowałbym wypróbowanie tej wtyczki jQuery Print element

Pozwala na wydrukowanie wybranego elementu.

Przy aktualnie akceptowanym rozwiązaniu nie można już wydrukować strony zawierającej samo okno dialogowe. Oto znacznie bardziej dynamiczne rozwiązanie:

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;
    }
}

Przykład:

<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 -->

Oto opcja wykorzystująca rozszerzenie JQuery, które zrobiłem na podstawie kodu waspinatora w komentarzach zaakceptowanej odpowiedzi:

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/

Może to być przydatne, jeśli nie chcesz, aby to było stosowane do każdego wydruku i po prostu zrób to na niestandardowym przycisku drukowania (co było w moim przypadku).

Jest to poprawione rozwiązanie, które będzie również działać w oknach modalnych renderowanych przy użyciu szablonu Grails, gdzie możesz mieć ten sam szablon modalny wywoływany wielokrotnie (z różnymi wartościami) w tym samym ciele. Ten wątek bardzo mi pomógł, więc pomyślałem, że podzielę się nim na wypadek, gdyby inni użytkownicy Grails znaleźli drogę tutaj.

Dla tych, którzy są ciekawi, przyjęte rozwiązanie nie zadziałało dla mnie, ponieważ renderuję tabelę; każdy wiersz ma przycisk, który otwiera okno modalne z większą ilością szczegółów o płycie. Doprowadziło to do stworzenia i wydrukowania na sobie wielu div-ów printSection. Dlatego musiałem zmienić js, aby wyczyścić div po zakończeniu drukowania.

CSS

Dodałem ten CSS bezpośrednio do mojego modalnego gsp, ale dodanie go do rodzica ma ten sam efekt.

<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>

Dodanie go do CSS w całej witrynie zabiło funkcjonalność drukowania w innych częściach witryny. Mam to z ComFreak's accepted answer (based on Bennett Odpowiedź McElwee ), ale jest poprawiona przy użyciu funkcji": not " z odpowiedzi fanfavorite na Print

Js

I to do mojego javascript, poprawione z ComFreak's zaakceptowanej odpowiedzi na to pytanie.

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;
}

Nie miałem potrzeby dodawania elementów, więc usunięto ten aspekt i zmieniono funkcję, aby konkretnie wydrukować div.

HTML (gsp)

I szablon modalny. Wyświetla nagłówek modalny i treść oraz wyłącza stopkę, w której znajdowały się przyciski.

<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>

Używam tylko trochę 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();
}

});

Oto skrzypce

Oto rozwiązanie bez Javascript lub plugin-tylko trochę css i jedną dodatkową klasę w znacznikach. Rozwiązanie to wykorzystuje fakt, że BootStrap dodaje klasę do ciała, gdy otwarte jest okno dialogowe. Używamy tej klasy, aby ukryć treść i wydrukować tylko okno dialogowe.

Aby upewnić się, że możemy określić główną treść strony, musimy zawierać wszystko w treści strony głównej w div-użyłem id= "mainContent". Przykładowy układ strony poniżej-ze stroną główną i dwoma dialogi

<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>

Następnie w naszych zapytaniach CSS print media, używam display: none, aby ukryć wszystko, czego nie chcę wyświetlać - czyli mainContent, gdy otwarte jest okno dialogowe. Używam również specyficznej klasy noPrint, która ma być używana na wszystkich częściach strony, które nie powinny być wyświetlane-powiedzmy przyciski akcji. Tutaj ukrywam również nagłówki i stopki. Być może trzeba go dostosować, aby uzyskać dokładnie chcesz chcesz.

@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;
    }
}

Miałem do czynienia z dwoma problemami Problem 1: wszystkie pola przychodziły jedno po drugim i Wydanie 2 Biała spacja u dołu strony podczas drukowania z wyskakującego okienka.

Rozwiązałem to przez

Making display none to all body * elements most of them go to visibility hidden which creates space so avoid visibility hidden

    @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;
      }
}

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

<body>
  <div class="noprint"> <!---no print--->
  <div class="noprint"> <!---no print--->
  <div class="print">   <!---print--->
  <div class="print">   <!---print--->


</body>