it-swarm.com.de

Einen bestimmten Teil der Webseite drucken

Ich versuche, einen bestimmten Teil meiner Anwendung zu drucken.

Die Anwendung verfügt über eine Liste mit Benutzern, deren Vor- und Nachname angezeigt werden. Wenn ich auf einen Benutzer klicke, erhalte ich ein Popup mit detaillierteren Informationen dazu. 

Wie gehe ich vor, um nur das Popup für einen Benutzer zu drucken, auf den ich geklickt habe?.

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

Die Drucktaste funktioniert jedoch noch nicht.

49
ItsGreg

Sie können einfaches JavaScript verwenden, um ein bestimmtes div von einer Seite zu drucken.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
113
pmtamal

Sie müssen ein neues Fenster öffnen (oder zu einer neuen Seite navigieren), das nur die Informationen enthält, die der Benutzer drucken kann

Javscript:

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

Hier einige Anmerkungen: Der Anker darf KEINEN Leerraum zwischen dem Anker und dem Div enthalten, das den zu druckenden Inhalt enthält

9
SReject

Ich habe diese jQuery-Erweiterung erstellt, um den HTML-Code des ausgewählten Elements zu drucken: $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

Sehen Sie es in Aktion hier .

7

Anstelle des komplizierten JavaScript können Sie dies mit einfachen CSS erreichen: Verwenden Sie einfach zwei CSS-Dateien, eine für Ihre normale Bildschirmanzeige und eine andere für die Anzeige vonONLYdes Inhalts, den Sie drucken möchten. Verbergen Sie in dieser Datei alles, was Sie nicht drucken möchten, und zeigen Sie nur das Popup an. 

Denken Sie daran, das media-Attribut beider CSS-Dateien zu definieren:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
6
che-azeh

Verwenden Sie einfach CSS, um den Inhalt auszublenden, den Sie nicht drucken möchten. Wenn der Benutzer "Drucken" auswählt, wird die Seite " media =" print "CSS angezeigt.

Das media = "print" CSS enthält Anweisungen zum Ausblenden des Inhalts, der nicht gedruckt werden soll.

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>
4
Stnfordly

Hier ist meine erweiterte Version, die, wenn wir CSS-Dateien laden möchten oder Bildverweise in dem zu druckenden Teil enthalten.

In diesen Fällen müssen wir warten, bis die CSS-Dateien oder Bilder vollständig geladen sind, bevor Sie die print () - Funktion aufrufen. Daher sollten wir die Funktionsaufrufe print () und close () in die HTML-Datei verschieben. Folgendes ist das Codebeispiel:

var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
1
hailong

Ich habe eine bessere Option,

Trennen Sie zuerst den druckbaren und den nicht druckbaren Abschnitt nach Klassenname oder ID

window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  // Visible the nonPrintable div
}
<input type="button" onclick="print()" value="Print"/>

Das ist alles

1
Arul Mani

Wie hier beantwortet: https://stackoverflow.com/a/1072151/421243 , können Sie den bestimmten Abschnitt mit Javascript zu einem verborgenen Rahmen hinzufügen, fokussieren und drucken.

0
David Cook

Übergeben Sie in der Funktion printPageArea() die spezifische Div-ID, die Sie drucken möchten. Ich habe diesen JavaScript-Code von codexworld.com gefunden.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

Den vollständigen Code und das Tutorial finden Sie hier - So drucken Sie den Seitenbereich mit JavaScript .

0
JoyGuru

Ich habe ein kleines JavaScript-Modul namens PrintElements geschrieben, um Teile einer Webseite dynamisch zu drucken.

Es durchläuft ausgewählte Knotenelemente und durchläuft für jeden Knoten den DOM-Baum bis zum BODY-Element. Auf jeder Ebene, einschließlich der ersten Ebene (die Ebene des zu druckenden Knotens), wird dem aktuellen Knoten eine Markierungsklasse (pe-preserve-print) hinzugefügt. Fügt dann allen Geschwistern des aktuellen Knotens eine weitere Markierungsklasse (pe-no-print) hinzu, jedoch nur, wenn keine pe-preserve-print -Klasse vorhanden ist. Als dritter Akt wird auch eine weitere Klasse an die erhaltenen Vorfahrenelemente angehängt. pe-preserve-ancestor.

Ein absolut einfaches, zusätzliches Nur-Druck-CSS wird die entsprechenden Elemente verbergen und anzeigen. Einige Vorteile dieses Ansatzes bestehen darin, dass alle Stile beibehalten werden, dass kein neues Fenster geöffnet wird, dass nicht viele DOM-Elemente verschoben werden müssen und dass das ursprüngliche Dokument im Allgemeinen nicht invasiv ist.

Schauen Sie sich die Demo an oder lesen Sie den entsprechenden Artikel für weitere Details .

0