it-swarm.com.de

Nur <div id = "printarea"> </ div> drucken?

Wie drucke ich das angegebene div aus (ohne alle anderen Inhalte auf der Seite manuell zu deaktivieren)?

Ich möchte ein neues Vorschaudialogfeld vermeiden, daher ist es nicht sinnvoll, ein neues Fenster mit diesem Inhalt zu erstellen.

Die Seite enthält einige Tabellen, von denen eine das Div enthält, das ich drucken möchte. Die Tabelle enthält visuelle Stile für das Web, die im Druck nicht angezeigt werden sollen.

394
noesgard

Hier ist eine allgemeine Lösung mit nur CSS, die ich überprüft habe, um zu arbeiten.

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

Alternative Ansätze sind nicht so gut. Die Verwendung von display ist schwierig, da, wenn ein Element display:none enthält, auch keiner seiner Nachkommen angezeigt wird. Um es zu verwenden, müssen Sie die Struktur Ihrer Seite ändern.

Die Verwendung von visibility funktioniert besser, da Sie die Sichtbarkeit für Nachkommen aktivieren können. Die unsichtbaren Elemente wirken sich jedoch immer noch auf das Layout aus. Deshalb verschiebe ich section-to-print nach links oben, damit es richtig gedruckt wird.

698
Bennett McElwee

Ich habe eine bessere Lösung mit minimalem Code.

Platzieren Sie Ihr druckbares Teil in einem Div mit der folgenden ID:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Fügen Sie dann ein Ereignis wie einen Klick (wie oben gezeigt) hinzu und übergeben Sie die ID des Div wie oben beschrieben.

Jetzt erstellen wir ein wirklich einfaches Javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

Beachten Sie, wie einfach das ist? Keine Popups, keine neuen Fenster, kein verrücktes Styling, keine JS-Bibliotheken wie JQuery. Das Problem mit wirklich komplizierten Lösungen (die Antwort ist nicht kompliziert und nicht das, worauf ich mich beziehe) ist die Tatsache, dass sie NIEMALS in allen Browsern übersetzt werden! Wenn Sie die Stile anders gestalten möchten, gehen Sie wie in der Antwort mit dem Häkchen vor, indem Sie das Medienattribut einem Stylesheet-Link hinzufügen (media = "print").

Keine Flusen, leicht, es funktioniert einfach.

222
Kevin Florida

Alle bisherigen Antworten sind ziemlich fehlerhaft - sie beinhalten entweder das Hinzufügen von class="noprint" zu allem oder bringen display innerhalb von #printable durcheinander.

Ich denke, die beste Lösung wäre, einen Wrapper um das nicht druckbare Zeug zu erstellen:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

Natürlich ist dies nicht perfekt, da es darum geht, Dinge in Ihrem HTML-Code ein wenig zu verschieben ...

118
Greg

Mit jQuery ist es so einfach:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
105
romaninsh

Könnten Sie ein Druck-Stylesheet verwenden und CSS verwenden, um den Inhalt anzuordnen, den Sie drucken möchten? Lesen Sie diesen Artikel für weitere Hinweise.

21
Paul Dixon

Das funktioniert gut:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Beachten Sie, dass dies nur mit "Sichtbarkeit" funktioniert. "display" macht das nicht. Getestet in FF3.

19

Ich mochte keine dieser Antworten wirklich als Ganzes. Wenn Sie eine Klasse haben (sagen Sie printableArea) und diese als unmittelbares Kind des Körpers haben, können Sie in Ihrem Print-CSS Folgendes tun:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Die Verwendung der Sichtbarkeit kann viele Platzprobleme und leere Seiten verursachen. Dies liegt daran, dass die Sichtbarkeit den Raum der Elemente beibehält, ihn nur verbirgt, während die Anzeige ihn entfernt und es anderen Elementen ermöglicht, seinen Raum einzunehmen.

Der Grund, warum diese Lösung funktioniert, ist, dass Sie nicht alle Elemente greifen, sondern nur die unmittelbaren Kinder des Körpers und sie verstecken. Bei den anderen unten aufgeführten Lösungen mit CSS-Anzeige werden alle Elemente ausgeblendet, was sich auf den gesamten Inhalt von printableArea auswirkt.

Ich würde kein Javascript vorschlagen, da Sie eine Druckschaltfläche benötigen, auf die der Benutzer klickt, und die Standard-Druckschaltflächen des Browsers würden nicht den gleichen Effekt haben. Wenn Sie das wirklich tun müssen, würde ich das HTML des Körpers speichern, alle unerwünschten Elemente entfernen, drucken und dann das HTML wieder hinzufügen. Wie bereits erwähnt, würde ich dies vermeiden, wenn Sie eine CSS-Option wie oben verwenden können.

HINWEIS: Sie können dem Druck-CSS beliebiges CSS hinzufügen, indem Sie Inline-Stile verwenden:

<style type="text/css">
@media print {
   //styles here
}
</style>

Oder wie ich normalerweise benutze, ist ein Link-Tag:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
13
fanfavorite
  1. Geben Sie das gewünschte Element an, um die ID printMe zu drucken.

  2. Fügen Sie dieses Skript in Ihr head-Tag ein:

    <script language="javascript">
        var gAutoPrint = true;
    
        function processPrint(){
    
        if (document.getElementById != null){
        var html = '<HTML>\n<HEAD>\n';
        if (document.getElementsByTagName != null){
        var headTags = document.getElementsByTagName("head");
        if (headTags.length > 0) html += headTags[0].innerHTML;
        }
    
        html += '\n</HE' + 'AD>\n<BODY>\n';
        var printReadyElem = document.getElementById("printMe");
    
        if (printReadyElem != null) html += printReadyElem.innerHTML;
        else{
        alert("Error, no contents.");
        return;
        }
    
        html += '\n</BO' + 'DY>\n</HT' + 'ML>';
        var printWin = window.open("","processPrint");
        printWin.document.open();
        printWin.document.write(html);
        printWin.document.close();
    
        if (gAutoPrint) printWin.print();
        } else alert("Browser not supported.");
    
        }
    </script>
    
  3. Rufen Sie die Funktion auf

    <a href="javascript:void(processPrint());">Print</a>
    
8
Sandro

hm ... benutze den Typ eines Stylesheets zum Drucken ... zB:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css:

div { display: none; }
#yourdiv { display: block; }
6

Schritt 1: Schreiben Sie das folgende Javascript in Ihre Kopfmarke

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Schritt 2: Rufen Sie die PrintMe-Funktion ('DivID') durch ein Klickereignis auf.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
6
Hardik Thaker
<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>
6
Dilip Kr Singh

In meinem Fall musste ich ein Bild innerhalb einer Seite drucken. Als ich die gewählte Lösung verwendete, hatte ich 1 leere Seite und die andere Seite mit dem Bild. Hoffe, es wird jemandem helfen.

Hier ist das CSS, das ich verwendet habe:

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

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

Mein HTML ist:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
2

Ich habe den Inhalt mit JavaScript aufgenommen und ein Fenster erstellt, das ich stattdessen drucken könnte ...

2
noesgard

Sandros Methode funktioniert großartig.

Ich habe es optimiert, um zu ermöglichen, dass mehrere printMe-Links verwendet werden, insbesondere für Registerkarten und das Erweitern von Text.

function processPrint(printMe){ <- Hier wird eine Variable angefordert

var printReadyElem = document.getElementById(printMe); <- entfernte die Anführungszeichen um printMe, um nach einer Variablen zu fragen

<a href="javascript:void(processPrint('divID'));">Print</a> <- Übergeben der zu druckenden Div-ID an die Funktion, um die Variable printMe in die Div-ID umzuwandeln. einfache Anführungszeichen sind erforderlich

2
westy

Mit CSS 3 können Sie Folgendes verwenden:

body *:not(#printarea) {
    display: none;
}
2
Gumbo

@ Kevin Florida Wenn Sie mehrere Divs mit derselben Klasse haben, können Sie dies folgendermaßen verwenden:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

ich habe den inneren Inhaltstyp von Colorbox verwendet

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});
2
Stefan

printDiv (divId): Eine verallgemeinerte Lösung zum Drucken eines beliebigen Divs auf einer beliebigen Seite.

Ich hatte ein ähnliches Problem, wollte aber (a) in der Lage sein, die gesamte Seite zu drucken, oder (b) einen von mehreren spezifischen Bereichen drucken. Meine Lösung ermöglicht es Ihnen, dank vieler der oben genannten Punkte ein beliebiges div-Objekt anzugeben, das gedruckt werden soll.

Der Schlüssel für diese Lösung besteht darin, dem Druckmedien-Stylesheet eine entsprechende Regel hinzuzufügen, damit das angeforderte div (und sein Inhalt) gedruckt werden.

Erstellen Sie zunächst das erforderliche Druck-CSS, um alles zu unterdrücken (jedoch ohne die spezifische Regel, die das zu druckende Element zulässt).

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Beachten Sie, dass ich neue Klassenregeln hinzugefügt habe:

  • Mit noprintarea können Sie das Drucken von Elementen in Ihrem Bereich, sowohl den Inhalt als auch den Block, unterdrücken.
  • Mit noprintcontent können Sie das Drucken von Elementen in Ihrem Bereich unterdrücken. Der Inhalt wird unterdrückt, aber der zugewiesene Bereich bleibt leer.
  • Mit print können Sie Elemente erstellen, die in der gedruckten Version, jedoch nicht auf der Bildschirmseite angezeigt werden. Diese haben normalerweise "display: none" für den Bildschirmstil.

Fügen Sie dann drei JavaScript-Funktionen ein. Die erste Option schaltet lediglich das Druckmedien-Stylesheet ein und aus.

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }   

Die zweite erledigt die eigentliche Arbeit und die dritte räumt danach auf. Der zweite Befehl (printDiv) aktiviert das Druckmedien-Stylesheet, fügt dann eine neue Regel hinzu, damit das gewünschte Div gedruckt werden kann, gibt den Druck aus und fügt dann eine Verzögerung vor dem endgültigen Housekeeping hinzu (andernfalls können die Stile zurückgesetzt werden, bevor der Druck tatsächlich erfolgt getan.)

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

Die letzten Funktionen löschen die hinzugefügte Regel und setzen den Druckstil wieder auf deaktiviert, damit die gesamte Seite gedruckt werden kann.

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

Das einzige andere, was Sie tun müssen, ist, Ihrer Onload-Verarbeitung eine Zeile hinzuzufügen, damit der Druckstil anfänglich deaktiviert wird und das Drucken ganzer Seiten möglich ist.

<body onLoad='disableSheet(0,true)'>

Anschließend können Sie von einer beliebigen Stelle in Ihrem Dokument aus ein Div drucken. Geben Sie einfach printDiv ("thedivid") von einem Knopf oder was auch immer aus.

Als großes Plus für diesen Ansatz bietet es eine allgemeine Lösung zum Drucken ausgewählter Inhalte innerhalb einer Seite. Es ermöglicht auch die Verwendung vorhandener Stile für Elemente, die gedruckt werden - einschließlich des enthaltenden Div.

HINWEIS: In meiner Implementierung muss dies das erste Stylesheet sein. Ändern Sie die Blattreferenzen (0) in die entsprechende Blattnummer, wenn Sie sie später in der Blattsequenz vornehmen müssen.

2
DrDave

Ich habe viele der angebotenen Lösungen ausprobiert. Keine davon funktionierte perfekt. Sie verlieren entweder CSS- oder JavaScript-Bindungen. Ich habe eine perfekte und einfache Lösung gefunden, die weder CSS- noch JavaScript-Bindungen verliert.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }
1
BibanCS

Ich komme sehr spät zu dieser Party, aber ich möchte noch einen anderen Ansatz verfolgen. Ich habe ein winziges 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 Klasse pe-preserve-print vorhanden ist. Als dritter Akt wird auch eine weitere Klasse an die erhaltenen Vorfahrenelemente pe-preserve-ancestor angehängt.

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.

Lesen Sie die Demo , oder lesen Sie den zugehörigen Artikel für weitere Details .

1

Noch eine Annäherung, ohne die aktuelle Seite zu beeinflussen, und die CSS bleibt beim Drucken erhalten. Hier muss der Selektor ein spezifischer Div-Selektor sein, welchen Inhalt wir drucken müssen.

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

Hier zeigen einige Auszeiten, dass externe CSS auf sie angewendet werden.

1

Verwenden Sie zum Drucken ein spezielles Stylesheet

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

und fügen Sie dann eine Klasse hinzu, d. h. "noprint", zu jedem Tag, dessen Inhalt Sie nicht drucken möchten.

Im CSS verwenden

.noprint {
  display: none;
}
1
Xn0vv3r

Sie können einen separaten CSS-Stil verwenden, der alle anderen Inhalte außer dem mit der ID "printarea" deaktiviert.

Weitere Erklärungen und Beispiele finden Sie unter CSS-Design: Going to Print .

1
Kosi2801

Die Funktion printDiv () wurde einige Male ausgeführt, in diesem Fall gehen jedoch alle Bindungselemente und Eingabewerte verloren. Meine Lösung besteht also darin, ein Div für alles mit dem Namen "body_allin" und ein anderes außerhalb des ersten mit dem Namen "body_print" zu erstellen.

Dann rufen Sie diese Funktion auf:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}
1
pmrotule

Ich hatte mehrere Bilder mit je einer Schaltfläche und musste auf eine Schaltfläche klicken, um jedes Div mit einem Bild zu drucken. Diese Lösung funktioniert, wenn ich den Cache in meinem Browser deaktiviert habe und sich die Bildgröße in Chrome nicht ändert:

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
1
live-love

Bester CSS-Wert, um die Höhe des leeren Raums anzupassen:

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
1
TRI ÂN

Sie können dies verwenden: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and- Nicht das ganze Dokument/

Oder verwenden Sie die CSS-Eigenschaft visibility:visible und visibility:hidden zusammen mit @media print{}

'display: none' verbirgt alle verschachtelten 'display: block'. Das ist keine Lösung.

0
0xC0DEGURU