Nur <div id = “printarea”> </ div> drucken?

444

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

Ich möchte einen neuen Vorschaudialog vermeiden, daher ist das Erstellen eines neuen Fensters mit diesem Inhalt nicht sinnvoll.

Die Seite enthält einige Tabellen, eine davon enthält das Div, das ich drucken möchte. Die Tabelle enthält visuelle Stile für das Web, die nicht gedruckt werden sollten.

javascript css printing dhtml Noesgard
quelle

1

stackoverflow.com/questions/2255291/… dieser Link funktioniert perfekt

Jinna Balu

792

Hier ist eine allgemeine Lösung, die nur CSS verwendet und deren Funktion ich überprüft habe.

@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 displayist schwierig, da bei einem Element auch display:nonekeiner seiner Nachkommen angezeigt wird. Um es zu verwenden, müssen Sie die Struktur Ihrer Seite ändern.

Die Verwendung visibilityfunktioniert besser, da Sie die Sichtbarkeit für Nachkommen aktivieren können. Die unsichtbaren Elemente wirken sich jedoch immer noch auf das Layout aus, sodass ich mich section-to-printnach links oben bewege , damit es richtig gedruckt wird.

Bennett McElwee
quelle

21

Dies ist bei weitem der schnellste und sauberste Weg. Ich frage mich, warum diese Antwort nicht die meisten Stimmen erhalten hat.

Dany Khalife

34

Ein Problem, auf das Sie bei dieser Lösung achten sollten, besteht darin, dass Sie in einigen Fällen Tausende von leeren Seiten drucken können. In meinem Fall konnte ich dies durch die Verwendung einer zusätzlichen Anzeige lösen: Kein Styling für ausgewählte Elemente, aber vielleicht ist eine allgemeinere Lösung durch eine Kombination aus Erzwingen von Höhen, Überlauf: Keine und absoluter Positionierung für alle Divs oder so etwas erreichbar.

Malcolm MacLeod

5

Dies ist ein guter Anfang, aber ich hatte zwei Probleme damit: Zum einen würde der Inhalt immer noch versetzt, wenn einer der Eltern des Elements eine eigene relative / absolute Position festlegt, es sei denn, ich verwende position:fixedstattdessen. Chrome und Safari würden jedoch auch Inhalte abschneiden, insbesondere nach der ersten Seite. So war meine letzte Abhilfe sowohl das Ziel gesetzt und alle seine Eltern aufoverflow:visible; position:absolute !important; top:0;left:0

natevw

1

@ dudeNumber4 #section-to-printentspricht dem Abschnitt selbst; #section-to-print *stimmt mit jedem Unterelement des Abschnitts überein. Diese Regel macht also nur den Abschnitt und seinen gesamten Inhalt sichtbar.

Bennett McElwee

3

Sie können eine JavaScript-Lösung ausprobieren, dies funktioniert jedoch nicht, wenn Ihr Benutzer den Druckbefehl des Browsers verwendet.

Bennett McElwee

243

Ich habe eine bessere Lösung mit minimalem Code.

Platzieren Sie Ihr druckbares Teil in einem Div mit einer ID wie folgt:

<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 Onclick hinzu (wie oben gezeigt) 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 wird! Wenn Sie die Stile unterscheiden möchten, gehen Sie wie in der aktivierten Antwort gezeigt vor, indem Sie das Medienattribut einem Stylesheet-Link hinzufügen (media = "print").

Kein Flaum, leicht, es funktioniert einfach.

Kevin Florida
quelle

@ Kevin Ich versuche dies für Formular, aber es druckt leeres Formular (ohne Daten) und ich brauche ein ausgefülltes Formular, um vor dem Absenden gedruckt zu werden

Arif

98

@asprin Warnung! Dies ist kein unordentlicher Code. Die Verwendung von innerHTML zum Löschen und erneuten Erstellen des gesamten Körpers ist für einfache Seiten in Ordnung. Bei erweiterten Anpassungen (Menüs, Diashows usw.) können jedoch einige dynamische Verhaltensweisen gelöscht werden, die von anderen Skripten hinzugefügt wurden.

Christophe

17

Diese Lösung funktioniert nicht auf komplexen Seiten, auf denen die Elemente im druckbaren Bereich von den Stilen und / oder der Position der übergeordneten Elemente abhängen. Wenn Sie das druckbare Div extrahieren, sieht es möglicherweise völlig anders aus, da jetzt alle Eltern fehlen.

Andrei Volgin

1

Funktioniert in Chrome leider nicht gut, wenn Sie das Druckvorschau-Fenster schließen und dann versuchen, eine jQuery zu erstellen .click. Es ist eine Schande, weil der Code so leicht ist.

Rybo111

3

@BorisGappov ein sehr einfaches Beispiel mit nur einem Klick, um meinen Standpunkt zu beweisen: jsfiddle.net/dc7voLzt Ich sage es noch einmal: Dies ist kein unkomplizierter Code! Das Problem liegt nicht beim Druck selbst, sondern beim Wiederherstellen der Originalseite!

Christophe

121

Alle bisherigen Antworten sind ziemlich fehlerhaft - sie beinhalten entweder das Hinzufügen class="noprint"zu allem oder werden darin durcheinander displaygeraten #printable.

Ich denke, die beste Lösung wäre, einen Wrapper um das nicht druckbare Material 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 ...

Greg
quelle

Ich denke, Sie haben Recht, aber wie kann ich das Styling der Tabelle, die das Div umgibt, beenden (wenn dies möglich ist, um das Styling zu entfernen - ich kann die Tabelle drucken und den Rest des Inhalts ganz einfach ausschließen

noesgard

Ich benutze Javascript, um den benötigten Inhalt und das CSS wie oben aufzunehmen

noesgard

9

Ich bevorzuge die Verwendung von semantischem HTML. Die Druckformatierung sollte idealerweise über CSS erfolgen. Siehe meine Antwort, um dies zu tun: stackoverflow.com/questions/468881/…

Bennett McElwee

Stimmen Sie Bennett zu, die Verwendung von Sichtbarkeit anstelle von Anzeige ist eine viel sauberere Lösung

Guigouz

Ich habe unten in diesem Thread eine wirklich einfache Lösung gefunden, die meiner Meinung nach besser zu den Bedürfnissen des Fragestellers passt. Es basiert nicht auf einem Druck-Stylesheet, kann auf Ihrer gesamten Website recycelt werden und ist unglaublich leicht.

Kevin Florida

108

Mit jQuery ist das so einfach:

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

romaninsh
quelle

3

Das ist ziemlich cool, obwohl es in Chrome als blockiertes Popup angezeigt wird.

Rafi Jacoby

8

Der Trick besteht darin, es bei einem vom Benutzer generierten Ereignis wie einem Mausklick aufzurufen. Sie können auch nach der ersten Zeile hinzufügen: if (! w) alert ('Bitte Popups aktivieren');

Romaninsh

1

Hat jemand dies auf IE11 arbeiten? Es öffnet nur ein Fenster und schließt es sofort. Funktioniert jedoch in Chrome, FF und Safari.

Greatwitenorth

3

Ich habe das CSS beim Drucken damit verloren. Gibt es eine Möglichkeit, das CSS zu pflegen?

Moxet Khan

2

@MoxetKhan, dieser Beitrag hat eine Lösung mit CSS vevlo.com/how-to-print-div-content-using-javascript

Seenare

22

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

Paul Dixon
quelle

Ich habe ein Druck-

Stylesheet

Ich habe eine Tabelle mit aktiviertem Styling, die das betreffende Div enthält. Wenn ich die Tabelle so einstelle, dass sie angezeigt wird: keine - kann ich das Div trotzdem anzeigen?

Noesgard

Ich denke schon, und Sie könnten versuchen, die Regel als! Wichtig zu markieren, um sie zu verbessern!

Paul Dixon

Wenn die Tabelle nicht angezeigt wird, spielt es keine Rolle, auch wenn das div auf 'display: awesome;' eingestellt ist. Der Elternteil ist versteckt, ebenso die Kinder. Ist dies eine Situation, in der Sie eine Tabelle benötigen, oder nur für das Seitenlayout?

Roborourke

"Boom, Kopfschuss!" durch Tabellenlayouts. = |

ANeves

19

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.

Christian Maioli M.
quelle

15

Ich mochte keine dieser Antworten als Ganzes wirklich. Wenn Sie eine Klasse haben (z. B. 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;
}

Wenn Sie an einem anderen Ort nach printableArea suchen, müssen Sie sicherstellen, dass die Eltern von printableArea angezeigt werden:

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

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

Die Verwendung der Sichtbarkeit kann viele Abstandsprobleme und leere Seiten verursachen. Dies liegt daran, dass die Sichtbarkeit den Elementraum beibehält, ihn nur ausblendet, während die Anzeige ihn entfernt und anderen Elementen ermöglicht, seinen Platz einzunehmen.

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

Ich würde kein Javascript vorschlagen, da Sie eine Druckschaltfläche benötigen, auf die der Benutzer klickt, und die Standardschaltflächen für den Browserdruck nicht den gleichen Effekt haben würden. Wenn Sie das wirklich tun müssen, würde ich das HTML des Körpers speichern, alle unerwünschten Elemente entfernen, drucken und 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 mithilfe von Inline-Stilen beliebiges CSS hinzufügen:

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

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

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

Fanfavorit
quelle

Was ist, wenn das Div, das Sie drucken möchten, kein "unmittelbares Kind des Körpers" ist? Ich versuche dies in vue.js zu tun. Aber ich bekomme viele leere Seiten, wenn ich die akzeptierte Antwort verwende.

Svenema

@svenema, Sie können jedes gewünschte CSS verwenden. Dies war nur ein Beispiel.

Fanfavorit

hmm, wenn ich das versuche, gibt es zwar keine zusätzlichen leeren Seiten, aber das printableArea div wird auch nicht angezeigt; Ich habe nur 1 leere leere Seite, wenn ich diesen Code verwende.

Svenema

Ich habe herausgefunden, dass es tatsächlich daran liegt, dass das printableArea-Div kein direktes Kind des Body-Tags ist. Wenn ich es zu einem direkten Kind mache, funktioniert Ihre Lösung. In meinem Fall kann ich die printableArea jedoch nicht zu einem direkten Kind machen. Gibt es einen Weg, dies zu umgehen?

Svenema

@svenema, siehe meine Bearbeitung oben.

Fanfavorit

8

Geben Sie das gewünschte Element an, um die ID zu drucken printMe.

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>

Rufen Sie die Funktion auf

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

Jason Plank
quelle

Das ist ein guter Job. Aber viel zu kompliziert und funktioniert nicht richtig browserübergreifend (insbesondere ältere Browser). Ich schlage vor, Sie werfen einen Blick auf meine Lösung unten.

Kevin Florida

6

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

Andreas Niedermair
quelle

Dies funktioniert nicht, wenn das Dokument nicht DIV-basiert ist oder #yourdiv auch weitere DIVs enthält.

Gumbo

#yourdiv * {display: ...} Wenn Sie dies oben auf der Seite platzieren und einen aktuellen Browser haben, können Sie mit mehr Selektoren arbeiten, um Nicht-Divs zu verstecken

Andreas Niedermair

"#yourdiv * {display: ...}" - was soll das ... sein, ohne das Layout zu beschädigen?

Greg

Dies würde Inline-Elemente auch als Blockelemente anzeigen. Aber "#yourdiv, #yourdiv div {display: block}" wird es tun.

Gumbo

@dittodhole - denke eine Minute darüber nach. Was könnten Sie dort einfügen, um das Layout in #yourdiv nicht zu beschädigen?

Greg

6

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

Dilip Kr Singh
quelle

6

Sieh gut aus, aber du verlierst alle Javascript-Bindungen und andere nach dem Druck

Julien

1

Es wird ohne CSS gedruckt.

Moxet Khan

6

Schritt 1: Schreiben Sie das folgende Javascript in Ihr Head-Tag

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

Hardik Thaker
quelle

Das ist die eine! Verwendet es für einen Modal und Galerien. Keine Javascript-Fehler nach dem Schließen. Wirklich hilfreich, besonders wenn Sie Modalitäten verwenden, die länger als eine Seite sind. Schön einpacken. Perfekt für Leute, die drucken möchten, um zu speichern.

TheWeeezel

2

Mit CSS 3 können Sie Folgendes verwenden:

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

Gumbo
quelle

Ich fürchte, ich kann das nicht benutzen ... (korrigiere mich, wenn ich falsch liege) Die Seite, an der ich arbeite, ist asp.net 1.1 / DHTML

noesgard

Es hängt vom Browser ab, ob der Selektor: not () bereits verfügbar ist oder nicht.

Gumbo

Na dann ist mein Vorschlag nur ein Blick in die Zukunft ... Nein, im Ernst. Ich habe es der Vollständigkeit halber nur erwähnt. Ich weiß, dass es momentan nicht praktikabel ist. Unglücklicherweise.

Gumbo

Sie könnten jQuery und diesen Selektor verwenden, der (glaube ich) in IE6 funktionieren würde - $ ('body *: not (#printarea)'). Style ('display', 'none');

David Heggie

2

Dadurch werden alle Nachkommen von #printarea ausgeblendet, da sie mit *: not (#printarea) übereinstimmen. Im Grunde genommen haben Sie also einen leeren Behälter.

Cytofu

2

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

Noesgard
quelle

Können Sie den Code teilen, hat es ein Problem mit der Übernahme von CSS

Moxet Khan

2

Sandros Methode funktioniert hervorragend.

Ich habe es so angepasst, dass mehrere printMe-Links zugelassen werden können, insbesondere für Registerkarten und das Erweitern von Text.

function processPrint(printMe){ <- hier eine Variable aufrufen

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

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

quelle

2

printDiv (divId) : Eine verallgemeinerte Lösung zum Drucken von Div auf jeder Seite.

Ich hatte ein ähnliches Problem, wollte aber (a) die gesamte Seite drucken können oder (b) einen von mehreren spezifischen Bereichen drucken. Meine Lösung ermöglicht es Ihnen, dank vieler der oben genannten Punkte, jedes zu druckende div-Objekt anzugeben.

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 die 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 des Inhalts als auch des Blocks unterdrücken.
Mit noprintcontent können Sie das Drucken von Elementen in Ihrem Bereich unterdrücken. Der Inhalt wird unterdrückt, der zugewiesene Bereich bleibt jedoch leer.
Mit "Drucken" können Elemente angezeigt werden, 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. Das erste schaltet lediglich das Stylesheet für Druckmedien ein und aus.

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

Der zweite erledigt die eigentliche Arbeit und der dritte räumt danach auf. Das zweite (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 der endgültigen Verwaltung hinzu (andernfalls können die Stile zurückgesetzt werden, bevor der Druck tatsächlich erfolgt erledigt.)

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 erneut 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, sodass der Druckstil zunächst deaktiviert wird, wodurch das Drucken ganzer Seiten ermöglicht wird.

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

Dann können Sie von überall in Ihrem Dokument ein Div drucken. Geben Sie einfach printDiv ("thedivid") über eine Schaltfläche oder was auch immer aus.

Ein großes Plus für diesen Ansatz ist die allgemeine Lösung für das Drucken ausgewählter Inhalte innerhalb einer Seite. Es ermöglicht auch die Verwendung vorhandener Stile für Elemente, die gedruckt werden - einschließlich des enthaltenen 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 Blattfolge vornehmen müssen.

DrDave
quelle

2

@ Kevin Florida Wenn Sie mehrere Divs mit derselben Klasse haben, können Sie es 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);
});

Stefan
quelle

2

In meinem Fall musste ich ein Bild innerhalb einer Seite drucken. Als ich die Lösung verwendet habe, hatte ich 1 leere Seite und die andere, die das Bild zeigt. 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>

Raphael Monteiro
quelle

2

Beste CSS für Platz leere Höhe:

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

TRI ÂN
quelle

2

Der beste Weg, um bestimmte Div oder ein Element zu drucken

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

Mahetab
quelle

1

Verwenden Sie zum Drucken ein spezielles Stylesheet

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

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

In der CSS verwenden

.noprint {
  display: none;
}

Xn0vv3r
quelle

1

Wenn Sie nur dieses Div drucken möchten, müssen Sie die folgenden Anweisungen verwenden:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

Jason Plank
quelle

1

Die Funktion printDiv () wurde einige Male ausgeführt. In diesem Fall verlieren Sie jedoch alle Bindungselemente und Eingabewerte. Meine Lösung besteht also darin, ein Div für alles zu erstellen, das "body_allin" heißt, und ein anderes außerhalb des ersten, das "body_print" heißt.

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

}

pmrotule
quelle

Diese Zeile kann nützlich sein, wenn Sie eine eindeutige ID wünschen: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');

pmrotule

1

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

Weitere Erläuterungen und Beispiele finden Sie unter CSS-Design: Zum Drucken .

Kosi2801
quelle

Der Link zum neuen Speicherort wurde aktualisiert. Ein Kommentar statt einer Abwertung wäre schön gewesen.

Kosi2801

1

Ich hatte mehrere Bilder mit jeweils 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!" />

Live-Liebe
quelle

1

Noch ein Ansatz, ohne die aktuelle Seite zu beeinflussen, und der CSS bleibt auch 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 wird eine Auszeit gegeben, um zu zeigen, dass externes CSS darauf angewendet wird.

Mukesh Kumar Suman
quelle

Das Laden von CSS dauert manchmal einige Zeit. Mit diesem Ansatz wollte ich die Seite vor dem Drucken neu laden. Vielen Dank

Arpit Shrivastava

1

Ich habe viele der angebotenen Lösungen ausprobiert. Keine davon hat perfekt funktioniert. Sie verlieren entweder CSS- oder JavaScript-Bindungen. Ich habe eine perfekte und einfache Lösung gefunden, bei der weder CSS- noch JavaScript-Bindungen verloren gehen.

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

BibanCS
quelle

Dieses Öffnen und Erstellen eines anderen Fensters, das unter Android nicht funktioniert. Nur direktes window.print () funktioniert.

Merv

1

Ich bin sehr spät zu dieser Party, aber ich würde gerne noch einen anderen Ansatz verfolgen. 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 (bei der es sich um die Ebene des zu druckenden Knotens handelt), wird pe-preserve-printdem aktuellen Knoten eine Markierungsklasse ( ) hinzugefügt. Hängt dann eine weitere Markierungsklasse ( pe-no-print) an alle Geschwister des aktuellen Knotens an, jedoch nur, wenn keine pe-preserve-printKlasse vorhanden ist . Als dritter Akt wird auch eine andere Klasse an erhaltene Ahnenelemente angehängt pe-preserve-ancestor.

Eine absolut einfache zusätzliche Nur-Druck-CSS blendet die entsprechenden Elemente aus und zeigt sie an. Einige Vorteile dieses Ansatzes sind, dass alle Stile beibehalten werden, kein neues Fenster geöffnet wird, nicht viele DOM-Elemente verschoben werden müssen und im Allgemeinen nicht invasiv für Ihr Originaldokument sind.

Weitere Informationen finden Sie in der Demo oder im entsprechenden Artikel .

András Szepesházi
quelle

0

Sie können dies verwenden: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Oder verwenden Sie visibility:visibleund visibility:hiddenCSS-Eigenschaft zusammen mit@media print{}

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

0xC0DEGURU
quelle

0

Ich habe die Lösung gefunden.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

user2573099
quelle

0

Basierend auf der Antwort von @Kevin Florida habe ich einen Weg gefunden, um das Deaktivieren von Skripten auf der aktuellen Seite aufgrund des Überschreibens von Inhalten zu vermeiden. Ich verwende eine andere Datei namens "printScreen.php" (oder .html). Wickeln Sie alles, was Sie drucken möchten, in eine div "printSource" ein. Öffnen Sie mit Javascript ein neues Fenster, das Sie zuvor erstellt haben ("printScreen.php"), und greifen Sie dann auf den Inhalt in "printSource" des oberen Fensters zu.

Hier ist der Code.

Hauptfenster :

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Dies ist "printScreen.php" - eine andere Datei, um Inhalte zum Drucken abzurufen

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

QeiNui
quelle

Nur <div id = “printarea”> </ div> drucken?

Antworten: