it-swarm.com.de

Twitter Bootstrap: Inhalt des modalen Fensters drucken

Ich entwickle eine Website mit Bootstrap, die 28 modale Fenster mit Informationen zu verschiedenen Produkten enthält. Ich möchte die Informationen in einem offenen modalen Fenster drucken können. Jedes Fenster hat eine 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>

Wenn ich also in modal-footer - 'print' eine neue Schaltfläche hinzufüge und auf diese geklickt habe, möchte ich, dass dieser Modal gedruckt wird. Hätte ich Recht damit, dass Javascript verwendet würde? Wenn ja, wie kann ich Javascript so einstellen, dass nur das offene Modal und nicht die anderen gedruckt werden?

Alle Hilfe wird geschätzt.

42
MattSull

Eine andere Lösung

Hier ist eine neue Lösung basierend auf Bennett McElwees Antwort in der gleichen Frage wie unten erwähnt.

Getestet mit IE 9 & 10, Opera 12.01, Google Chrome 22 und Firefox 15.0. 
jsFiddle-Beispiel

1.) Fügen Sie diese CSS Ihrer Site hinzu:

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

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

2.) Fügen Sie meine JavaScript-Funktion hinzu

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

Sie können jedes Element auf Ihrer Site ausdrucken!
Rufen Sie einfach printElement() mit Ihren Elementen auf und führen Sie window.print() aus, wenn Sie fertig sind.

Hinweis: Wenn Sie den Inhalt ändern möchten, bevor er gedruckt wird (und nur in der Druckversion), überprüfen Sie dieses Beispiel (bereitgestellt von waspina in den Kommentaren): http: // jsfiddle .net/95ezN/121/

Man könnte auch CSS verwenden, um den zusätzlichen Inhalt in der Druckversion (und nur dort) anzuzeigen.


Frühere Lösung

Ich denke, Sie müssen alle anderen Teile der Site über CSS ausblenden.

Am besten wäre es, alle nicht druckbaren Inhalte in eine separate DIV zu verschieben:

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

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

Und dann in deinem CSS:

.printable { display: none; }

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

Credits gehen an Greg wer hat schon eine ähnliche Frage beantwortet: Nur <div id = "printarea"> </ div>?

Es gibt ein Problem bei der Verwendung von JavaScript: Der Benutzer kann keine Vorschau anzeigen - zumindest in Internet Explorer!

54
ComFreek

Ich würde vorschlagen, dass Sie dieses jQuery-Plugin print element ausprobieren.

Damit können Sie einfach das ausgewählte Element drucken.

8
maxisam

Mit der aktuell akzeptierten Lösung können Sie die Seite, die den Dialog selbst enthält, nicht mehr drucken. Hier ist eine viel dynamischere Lösung:

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

Beispiel:

<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

Hier ist eine Option, die eine JQuery-Erweiterung verwendet, die ich basierend auf dem Code von waspinator in den Kommentaren der akzeptierten Antwort vorgenommen habe:

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/

Dies kann nützlich sein, wenn Sie nicht möchten, dass dies auf jeden einzelnen Druck angewendet wird, und tun Sie es einfach auf Ihrer benutzerdefinierten Druckschaltfläche (die in meinem Fall war).

6
bostero2

Dies ist eine überarbeitete Lösung, die auch für modale Fenster geeignet ist, die mit einer Grails-Vorlage gerendert werden, wobei dieselbe modale Vorlage mehrere Male (mit unterschiedlichen Werten) im selben Hauptteil aufgerufen werden kann. Dieser Thread hat mir sehr geholfen, also dachte ich, ich würde ihn weitergeben, falls andere Grails-Benutzer ihren Weg hierher gefunden hätten.

Für diejenigen, die neugierig sind, hat die akzeptierte Lösung für mich nicht funktioniert, weil ich einen Tisch rendere; Jede Zeile verfügt über eine Schaltfläche, die ein modales Fenster mit weiteren Details zum Datensatz öffnet. Dies führte dazu, dass mehrere printSection-Divis erstellt und übereinander gedruckt wurden. Deshalb musste ich die js überarbeiten, um das div nach dem Drucken zu bereinigen.

CSS

Ich habe dieses CSS direkt zu meinem modalen gsp hinzugefügt, aber das Hinzufügen zum übergeordneten Element hat den gleichen Effekt.

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

Durch das Hinzufügen zum gesamten Site-CSS wurde die Druckfunktion in anderen Teilen der Site deaktiviert. Ich habe dies von ComFreak 's akzeptierter Antwort erhalten (basierend auf Bennett McElwees answer ), aber es wurde die': not'-Funktionalität aus fanfavorite 's Antwort auf Print <div überarbeitet id = Druckbereich> nur </ div>? . Ich entschied mich für "Anzeige" anstelle von "Sichtbarkeit", da durch den unsichtbaren Körperinhalt zusätzliche leere Seiten erstellt wurden, was für meine Benutzer nicht akzeptabel war.

js

Und dies zu meinem Javascript, überarbeitet von ComFreak 's akzeptierte Antwort auf diese Frage.

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

Ich hatte keine Notwendigkeit, Elemente anzufügen, also entfernte ich diesen Aspekt und änderte die Funktion, um spezifisch ein div zu drucken. 

HTML (gsp)

Und die modale Vorlage. Dadurch werden die modale Kopfzeile und der Hauptteil gedruckt und die Fußzeile, in der sich die Schaltflächen befunden haben, ausgeschlossen.

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

Ich hoffe das hilft jemandem!

4
Kara Johnson

Ich benutze nur ein bisschen 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();
}

});

hier ist die Geige

3
alexoviedo999

Hier ist eine Lösung ohne Javascript oder Plugin - nur ein paar CSS und eine zusätzliche Klasse im Markup .. Diese Lösung nutzt die Tatsache, dass BootStrap dem Body eine Klasse hinzufügt, wenn ein Dialog geöffnet ist. Wir verwenden diese Klasse, um den Körper auszublenden und nur den Dialog zu drucken.

Um sicherzustellen, dass wir den Hauptteil der Seite bestimmen können, müssen wir den gesamten Inhalt der Hauptseite in einem div enthalten. Ich habe id = "mainContent" verwendet. Beispiel für Seitenlayout - mit einer Hauptseite und zwei Dialogen

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

In meinen CSS-Druckmedien-Abfragen verwende ich dann display: none, um alles auszublenden, das nicht angezeigt werden soll - dh der mainContent, wenn ein Dialog geöffnet ist. Ich verwende auch eine bestimmte Klasse noPrint, um auf allen Teilen der Seite verwendet zu werden, die nicht angezeigt werden sollten - etwa Aktionsschaltflächen. Hier verstecke ich auch die Kopf- und Fußzeilen. Möglicherweise müssen Sie es optimieren, um genau die gewünschten Informationen zu erhalten.

@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

sie können printThis lib von dieser Quelle herunterladen https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js und in Ihre HTML-Seite einfügen

Rufen Sie die folgende Abfrage auf, um den gesamten Inhalt einschließlich des nicht sichtbaren Inhalts zu drucken. Sie können Ihre CSS-Dateien in ein Array aufnehmen, wenn Sie mehrere CSS-Dateien haben.

$("#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

Ich hatte zwei Probleme Ausgabe 1: Alle Felder kamen nacheinander und __. Ausgabe 2 Leerzeichen am unteren Rand der Seite, wenn von Popup aus gedruckt wurde.

Ich habe das gelöst durch

display none Für alle body * -Elemente gilt, dass die meisten von ihnen die Sichtbarkeit verborgen halten, wodurch Platz geschaffen wird

    @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