Drucken Sie den Inhalt eines DIV

335

Was ist der beste Weg, um den Inhalt eines DIV zu drucken?

javascript jquery html printing Usertest
quelle

Versuchen Sie Druckelement hier

Gabe

1

Was meinst du mit Druck? Wie in einem physischen Drucker?

Yuriy Faktorovich

"Drucken" wie in einem Drucker? oder zum Dokument?

Ed Schembor

Ich habe das beste Plugin bisher entwickelt von etimbo gefunden github.com/etimbo/jquery-print-preview-plugin

MaxI

3

Nur als Referenz für alle, die nach einer Lösung für diese Frage des Druckens eines Div suchen. Ich fand die folgende Antwort sehr nützlich: stackoverflow.com/a/7532581/405117

Vikram

516

Leichte Änderungen gegenüber früheren Versionen - getestet auf CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

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

    mywindow.print();
    mywindow.close();

    return true;
}

Bill Paetzke
quelle

8

Dies ist eine schnelle Lösung. Die ideale Lösung ist die Verwendung eines separaten CSS zum Drucken. Vielleicht können Sie die Details (Anforderungen) Ihres Problems näher erläutern.

Bill Paetzke

6

Sie können auf das Stylesheet im Popup-Fenster verweisen. Fügen Sie eine weitere Codezeile zwischen <head> -Tags ein: mywindow.document.write ('<link rel = "stylesheet" href = "main.css" type = "text / css" />');

Bill Paetzke

5

@ Rahil ändere es in Folgendes: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();

ROFLwTIME

3

^ füge newwindow.focus () hinzu; um den Cross-Browser-Druck zu aktivieren.

JackMahoney

7

Es kommt manchmal vor, dass die Druckvorschau nicht geladen werden kann, möglicherweise wenn der zu druckende Inhalt ziemlich groß ist (ich habe es nur bei Chrome bemerkt, während dieselbe Seite in Firefox perfekt gedruckt wird, aber ich schließe nicht aus, dass dies auch in Firefox oder anderen Browsern passieren kann). Der beste Weg, den ich gefunden habe, ist, den Druck erst auszuführen (und zu schließen), nachdem Windows geladen wurde. Also danach: mywindow.document.write(data);Füge dies hinzu:

mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');

Und entferne: mywindow.print();undmywindow.close();

Fabius

164

Ich denke, es gibt eine bessere Lösung. Lassen Sie Ihre Div zum Drucken das gesamte Dokument abdecken, aber nur, wenn es gedruckt wird:

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

BC.
quelle

Perfekt, viel schöner als ein Popup.

GreenWebDev

5

Leider funktioniert es im IE nicht ganz wie erwartet, siehe: stackoverflow.com/questions/975129/…

jarek.jpa

16

Inhalte, die auf mehrere Seiten überlaufen sollten, werden in Chrome anscheinend abgeschnitten.

Ishmael Smyrnow

Im IE müssen Sie den Rest des Dokuments ausblenden. Das Ändern wie oben funktioniert wie folgt: @media print {body * {display: none; } .myDivToPrint {display: block; Hintergrundfarbe: weiß; Höhe: 100%; Breite: 100%; Position: fest; oben: 0; links: 0; Rand: 0; Polsterung: 15px; Schriftgröße: 14px; Zeilenhöhe: 18px; }}

RonnBlack

2

Möglicherweise müssen Sie den Z-Index eingeben: 9999999; falls Sie andere Elemente höher positioniert haben.

Adam M.

43

Obwohl dies von @gabe gesagt wurde , können Sie mein printElementPlugin verwenden , wenn Sie jQuery verwenden .

Es gibt eine Probe hier und weitere Informationen über das Plugin hier .

Die Verwendung ist ziemlich einfach. Nehmen Sie einfach ein Element mit einem jQuery-Selektor und drucken Sie es aus:

$("#myDiv").printElement();

Ich hoffe, es hilft!

Erik
quelle

14

8 Jahre später wird dies "a.browser is undefined" erzeugen, da der .browser-Aufruf in jquery 1.9

KingsInnerSoul

1

@KingsInnerSoul sei nicht so unhöflich mit jQuery-Benutzern, diese Zeiten sind hart genug für sie; p

Alexandre Daubricourt

@AlexandreDaubricourt lol

KingsInnerSoul

22

Verwenden Sie mit Jquery einfach diese Funktion:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

Ihr Druckknopf sieht folgendermaßen aus:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

Bearbeiten: Wenn Sie Formulardaten haben, die Sie behalten müssen, kopiert der Klon diese nicht. Sie müssen also nur alle Formulardaten abrufen und sie nach der Wiederherstellung wie folgt ersetzen:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>

Gary Hayes
quelle

$ ('body'). html (Wiederherstellungsseite); funktioniert nicht, da zu diesem Zeitpunkt kein Körperelement verfügbar ist. Daher ist es besser, es durch location.reload () zu ersetzen.

Debugger

Nein. Wenn Sie die Seite neu laden, löschen Sie alle Informationen in Formularen oder andere Einstellungen, die möglicherweise vorhanden sein müssen. Es funktioniert einwandfrei. Wenn Sie sich die Zeit nehmen, um sich den Code anzusehen, werden Sie feststellen, dass var restorepage alle Seiteninformationen zur Verfügung hat, um den Ersatz vorzunehmen. Hören Sie auf, meinen Code zu bearbeiten, und testen Sie ihn entweder selbst oder lernen Sie, was die einzelnen Teile der Funktion bewirken.

Gary Hayes

Das ist besser. Es enthält das Seitendesign beim Drucken im Gegensatz zu den oben genannten, bei denen ich noch CSS-Links aus dem Header usw. einfügen muss. Danke!

Jorz

Die Art und Weise, wie Sie bestanden haben, elist schrecklich, besonders seit Sie jQ verwenden. Viel besser, einfach zu bestehen selectorund die #

hartcodierten

Ich habe diese Methode heute immer verwendet. Ich habe festgestellt, dass sie auf einem Android-Gerät (Google Chrome) nicht richtig funktioniert. Der druckbare Bereich der Seite ändert sich jedes Mal und enthält einige zusätzliche Teile aus el. Ich denke, der Druckbefehl wird gesendet, wenn der Körper wiederhergestellt wird.

Ali Sheikhpour

18

Von hier http://forums.asp.net/t/1261525.aspx

<html>

<head>
    <script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>
    <title>div print</title>
</head>

<body>
    //HTML Page //Other content you wouldn't like to print
    <input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

    <div id="div_print">

        <h1 style="Color:Red">The Div content which you want to print</h1>

    </div>
    //Other content you wouldn't like to print //Other content you wouldn't like to print
</body>

</html>

huston007
quelle

1

Es ist eine Modifikation erforderlich, um footerStr in zwei Teile zu teilen. weil brwoser "</ body>" als Hauptende der aktuellen Seite verwendet. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;

Mirzaei

13

Ich habe die Bill PaetzkeAntwort verwendet, um ein Div zu drucken, das Bilder enthält, aber es funktionierte nicht mit Google Chrome

Ich musste nur diese Zeile hinzufügen myWindow.onload=function(){, damit es funktioniert und hier ist der vollständige Code

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>

Auch wenn jemand nur ein Div mit ID drucken muss, muss er keine Abfrage laden

Hier ist reiner Javascript-Code, um dies zu tun

<html>
<head>
    <script type="text/javascript">
        function PrintDiv(id) {
            var data=document.getElementById(id).innerHTML;
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>

Ich hoffe das kann jemandem helfen

Robert
quelle

Das hat bei mir funktioniert! Der Kamelkoffer hat mich allerdings gebissen, da die ursprüngliche Antwort "mywindow" vs. "myWindow" verwendet. Vielen Dank!

Opcode

12

function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

Dadurch wird der divgewünschte Bereich gedruckt und der Inhalt auf den ursprünglichen Zustand zurückgesetzt. printdivnameist das divzu druckende.

Technikfreak
quelle

Es ist eine Modifikation erforderlich, um footerStr in zwei Teile zu teilen. weil brwoser "</ body>" als Hauptende der aktuellen Seite verwendet. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;

Mirzaei

Das ist genial! Aber ja, du brauchst den Hack von mirzaei, sonst bricht das Body-Tag und du bekommst eine kaputte Formatierung. Mit dem Hack funktioniert das super! Sie können auch Ihre eigene innere Hülle hinzufügen, um spezielle Druckstile zu ermöglichen. Dies sollte die akzeptierte Antwort sein.

user2662680

9

Erstellen Sie ein separates Druck-Stylesheet, in dem alle anderen Elemente außer dem zu druckenden Inhalt ausgeblendet sind. Kennzeichnen Sie es mit, 'media="print"wenn Sie es laden:

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

Auf diese Weise können Sie ein völlig anderes Stylesheet für Ausdrucke laden.

Wenn Sie erzwingen möchten, dass der Druckdialog des Browsers für die Seite angezeigt wird, können Sie dies beim Laden mit JQuery folgendermaßen tun:

$(function() { window.print(); });

oder ausgelöst durch ein anderes Ereignis, das Sie möchten, z. B. wenn ein Benutzer auf eine Schaltfläche klickt.

Carl Russmann
quelle

2

Ja, das würde auch funktionieren. Es ist schwer - na ja, unmöglich - genau zu wissen, wie das Szenario aussieht.

Pointy

Ich stimme zu, dass ein separates CSS die ideale Lösung ist. Das Kopieren des Div-Inhalts in ein neues Fenster ist eine schnelle Lösung.

Bill Paetzke

9

Ich denke, die bisher vorgeschlagenen Lösungen haben die folgenden Nachteile:

Die CSS-Medienabfragelösungen gehen davon aus, dass nur ein Div gedruckt werden muss.
Die Javascript-Lösungen funktionieren nur in bestimmten Browsern.
Zerstören des Inhalts des übergeordneten Fensters und Neuerstellen, wodurch ein Durcheinander entsteht.

Ich habe die obigen Lösungen verbessert. Hier ist etwas, das ich getestet habe und das mit den folgenden Vorteilen wirklich gut funktioniert.

Funktioniert mit allen Browsern, einschließlich IE, Chrome, Safari und Firefox.
Zerstört das übergeordnete Fenster nicht und lädt es nicht neu.
Kann beliebig viele DIVs auf einer Seite drucken.
Verwendet HTML-Vorlagen, um eine fehleranfällige Verkettung von Zeichenfolgen zu vermeiden.

Wichtige Punkte zu beachten:

Das neu erstellte Fenster muss mit onload = "window.print ()" versehen sein.
Rufen Sie nicht targetwindow.close () oder targetwindow.print () vom übergeordneten Element aus auf.
Stellen Sie sicher, dass Sie targetwindow.document.close () und target.focus () ausführen.
Ich verwende jquery, aber Sie können die gleiche Technik auch mit einfachem Javascript ausführen.
Sie können dies hier in Aktion sehen http://math.tools/table/multiplication . Sie können jede Tabelle einzeln drucken, indem Sie auf die Schaltfläche Drucken in der Feldüberschrift klicken.

<script id="print-header" type="text/x-jquery-tmpl">
   <html>
   <header>
       <title>Printing Para {num}</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <style>
          body {
            max-width: 300px;
          }
       </style>
   </header>
   <body onload="window.print()">
   <h2>Printing Para {num} </h2>
   <h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
    </body>
    </html>
</script>
<script>
$('.printthis').click(function() {
   num = $(this).attr("data-id");
   w = window.open();
   w.document.write(
                   $("#print-header").html().replace("{num}",num)  +
                   $("#para-" + num).html() +
                   $("#print-footer").html() 
                   );
   w.document.close();
   w.focus();
   //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
   ///w.close(); Don't do this otherwise chrome won't work
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
  
<p class="para" id="para-1">
  Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  

<p class="para" id="para-2">
  Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Erweitern Sie das Snippet

dors
quelle

Dies war ausgezeichnet und funktionierte browserübergreifend viel besser als akzeptierte Ergebnisse!

dama_do_bling

7

Ich habe ein Plugin erstellt, um dieses Szenario anzugehen. Ich war mit den Plugins da draußen unzufrieden und machte mich daran, etwas umfangreicher / konfigurierbarer zu machen.

https://github.com/jasonday/printThis

Jason
quelle

1

Vielen Dank für deine harte Arbeit Jason ..... !! Ich werde es wirklich in meinen weiteren Projekten verwenden. Was für ein

6

Die akzeptierte Lösung funktionierte nicht. Chrome druckte eine leere Seite, weil das Bild nicht rechtzeitig geladen wurde. Dieser Ansatz funktioniert:

Bearbeiten: Es scheint, dass die akzeptierte Lösung nach meinem Beitrag geändert wurde. Warum das Downvote? Diese Lösung funktioniert auch.

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

Live-Liebe
quelle

4

Ich weiß, dass dies eine alte Frage ist, aber ich habe dieses Problem mit jQuery gelöst.

function printContents(id) {
    var contents = $("#"+id).html();

    if ($("#printDiv").length == 0) {
      var printDiv = null;
      printDiv = document.createElement('div');
      printDiv.setAttribute('id','printDiv');
      printDiv.setAttribute('class','printable');
      $(printDiv).appendTo('body');
    }

    $("#printDiv").html(contents);

    window.print();

    $("#printDiv").remove();
}

CSS

  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
  }

Jazzy
quelle

3

Obwohl @BC Antwort am besten war, um eine einzelne Seite zu drucken.

Es kann jedoch hilfreich sein, mehrere Seiten im A4-Format gleichzeitig mit Strg + P zu drucken.

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}

Arslan
quelle

2

Öffne ein neues Fenster
Öffnen Sie das Dokumentobjekt des neuen Fensters und schreiben Sie ein einfaches Dokument hinein, das nur das Div und den erforderlichen HTML-Header usw. enthält. Je nach Inhalt möchten Sie das Dokument möglicherweise auch in einem Stylesheet abrufen
Fügen Sie ein Skript in die neue Seite ein, um window.print () aufzurufen.
Löse das Skript aus

Spitze
quelle

2

Hier ist mein jquery print Plugin

(function ($) {

$.fn.printme = function () {
    return this.each(function () {
        var container = $(this);

        var hidden_IFrame = $('<iframe></iframe>').attr({
            width: '1px',
            height: '1px',
            display: 'none'
        }).appendTo(container);

        var myIframe = hidden_IFrame.get(0);

        var script_tag = myIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
        script_tag.appendChild(script);

        myIframe.contentWindow.document.body.innerHTML = container.html();
        myIframe.contentWindow.document.body.appendChild(script_tag);

        myIframe.contentWindow.Print();
        hidden_IFrame.remove();

    });
};
})(jQuery);

Karaxuna
quelle

2

Wenn Sie alle Stile aus dem Originaldokument haben möchten (einschließlich Inline-Stile), können Sie diesen Ansatz verwenden.

Kopieren Sie das vollständige Dokument
Ersetzen Sie den Körper durch das Element, das Sie drucken möchten.

Implementierung:

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}

Stefan Norberg
quelle

2

Ich weiß nicht, dass dies die beste Lösung ist, aber es hat perfekt funktioniert. Vielen Dank!

BRogers

Wenn es funktioniert, muss es das Beste sein :)

Stefan Norberg

2

Hinweis: Dies funktioniert nur mit jQuery-fähigen Sites

Mit diesem coolen Trick ist es sehr einfach. Es hat bei mir im Google Chrome- Browser funktioniert . In Firefox können Sie ohne Plugin nicht als PDF drucken.

Öffnen Sie zunächst den Inspektor mit (Strg + Umschalt + I) / (Befehlstaste + Option + I).
Geben Sie diesen Code in die Konsole ein:

var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours

Es startet den Druckdialog. Nehmen Sie einen physischen Ausdruck oder speichern Sie ihn als PDF (in Chrom). Erledigt!

Die Logik ist einfach. Wir erstellen ein neues Skript-Tag und hängen es vor dem schließenden Body-Tag an. Wir haben eine jQuery-Druckerweiterung in den HTML-Code eingefügt. Ändern Sie myDivWithStyles mit Ihrer eigenen Div-Tag-ID. Jetzt muss ein druckbares virtuelles Fenster vorbereitet werden.

Probieren Sie es auf jeder Website aus. Nur eine Einschränkung ist manchmal schwierig geschrieben. CSS kann dazu führen, dass Stile fehlen. Aber wir bekommen den Inhalt meistens.

Naren Yellavula
quelle

1

Versuchen Sie in Opera:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

mirk
quelle

1

Hier ist eine IFrame-Lösung, die für IE und Chrome funktioniert:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}

Kofifus
quelle

1

Es wurde etwas Generisches erstellt, das für jedes HTML-Element verwendet werden kann

HTMLElement.prototype.printMe = printMe;
function printMe(query){             
     var myframe = document.createElement('IFRAME');
     myframe.domain = document.domain;
     myframe.style.position = "absolute";
     myframe.style.top = "-10000px";
     document.body.appendChild(myframe);
     myframe.contentDocument.write(this.innerHTML) ;
     setTimeout(function(){
        myframe.focus();
        myframe.contentWindow.print();
        myframe.parentNode.removeChild(myframe) ;// remove frame
     },3000); // wait for images to load inside iframe
     window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

Hoffe das hilft.

Gaurav
quelle

1

Ich habe die @ BillPaetski-Antwort geändert, um querySelector zu verwenden, optionales CSS hinzuzufügen, das erzwungene H1-Tag zu entfernen und den Titel optional anzugeben oder aus dem Fenster zu ziehen. Es wird auch nicht mehr automatisch gedruckt und macht Interna verfügbar, sodass sie in der Wrapper-Funktion oder nach Belieben ausgeschaltet werden können.

Die einzigen zwei privaten Variablen sind tmpWindow und tmpDoc, obwohl ich glaube, dass Titel-, CSS- und Elem-Zugriff variieren können. Es sollte angenommen werden, dass alle Funktionsargumente privat sind.

Code:

function PrintElem(elem, title, css) {
    var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
    var tmpDoc = tmpWindow.document;

    title = title || document.title;
    css = css || "";

    this.setTitle = function(newTitle) {
        title = newTitle || document.title;
    };

    this.setCSS = function(newCSS) {
        css = newCSS || "";
    };

    this.basicHtml5 = function(innerHTML) {
        return '<!doctype html><html>'+(innerHTML || "")+'</html>';
    };

    this.htmlHead = function(innerHTML) {
        return '<head>'+(innerHTML || "")+'</head>';
    };

    this.htmlTitle = function(title) {
        return '<title>'+(title || "")+'</title>';
    };

    this.styleTag = function(innerHTML) {
        return '<style>'+(innerHTML || "")+'</style>';
    };

    this.htmlBody = function(innerHTML) {
        return '<body>'+(innerHTML || "")+'</body>';
    };

    this.build = function() {
        tmpDoc.write(
            this.basicHtml5(
                this.htmlHead(
                    this.htmlTitle(title) + this.styleTag(css)
                ) + this.htmlBody(
                    document.querySelector(elem).innerHTML
                )
            )
        );
        tmpDoc.close(); // necessary for IE >= 10
    };

    this.print = function() {
        tmpWindow.focus(); // necessary for IE >= 10*/
        tmpWindow.print();
        tmpWindow.close();
    };

    this.build();
    return this;
}

Verwendungszweck:

DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();

MrMesees
quelle

Außerdem werden die Werte der <input>Elemente nicht kopiert . Wie kann ich dies verwenden, einschließlich dessen, was der Benutzer eingegeben hat?

Malcolm Salvador

@ Malky.Kid bitte denken Sie darüber nach, was Sie fragen. Wenn Sie ein Formular drucken möchten, müssen Sie Unschärfe Ereignisse auf Formularelemente Haken und den Attributwert festgelegt, ausgewählt, Ausfall- und innertext von <input>, <select>, <textarea>compontents ihre Laufzeitwert sein. Es gibt Alternativen, aber es ist kein Problem mit diesem Skript, sondern ein Problem mit der Funktionsweise von Browsern und dem innerHTML

Abrufen

Ich bin bereits per Via zu einer Lösung gekommen .attr('value',). Ich habe es sogar für Textbereiche (durch Anhängen) und Kontrollkästchen ( .attr('checked',)) gemacht. Es tut mir leid, wenn ich nicht genug darüber nachgedacht habe, was ich gefragt habe.

Malcolm Salvador

Möchtest du mit der Klasse teilen? vielleicht ein Kern oder etwas in den Kommentaren. Ich werde es positiv bewerten.

MrMesees

0

Der folgende Code kopiert alle relevanten Knoten, auf die der Abfrageselektor abzielt, und kopiert ihre Stile, wie auf dem Bildschirm angezeigt, da viele übergeordnete Elemente, die für das Targeting der CSS-Selektoren verwendet werden, fehlen. Dies führt zu einer gewissen Verzögerung, wenn viele untergeordnete Knoten mit vielen Stilen vorhanden sind.

Idealerweise haben Sie ein Druck-Stylesheet bereit. Dies ist jedoch für Anwendungsfälle gedacht, in denen kein Druck-Stylesheet eingefügt werden muss und Sie wie auf dem Bildschirm angezeigt drucken möchten.

Wenn Sie die folgenden Elemente in die Browserkonsole auf dieser Seite kopieren, werden alle Codefragmente auf dieser Seite gedruckt.

+function() {
    /**
     * copied from  /programming/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };


    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }

    /** select elements to print with query selector **/
    var printSelection = function(querySelector) {
        // Create an iframe to make sure everything is clean and ordered.
        var iframe = document.createElement('iframe');
        // Give it enough dimension so you can visually check when modifying.
        iframe.width = document.width;
        iframe.height = document.height;
        // Add it to the current document to be sure it has the internal objects set up.
        document.body.append(iframe);

        var nodes = document.querySelectorAll(querySelector);
        if(!nodes || nodes.length == 0) {
           console.error('Printing Faillure: Nothing to print. Please check your querySelector');
           return;
        }

        for(i=0; i < nodes.length; i++) {

            // Get the node you wish to print.
            var origNode = nodes[i];

            // Clone it and all it's children
            var node = origNode.cloneNode(true);

            // Copy the base style.
            copyComputedStyle(origNode, node);

            if(origNode.children && origNode.children.length > 0) {
                buildChild(origNode.children, node.children);
            }

            // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.

            iframe.contentWindow.document.body.append(node);
        }
        // Print the window
        iframe.contentWindow.print();

        // Give the browser a second to gather the data then remove the iframe.
        window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
    }
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')

Tschallacka
quelle

0

Dies ist wirklich ein alter Beitrag, aber hier ist ein Update, das ich mit der richtigen Antwort gemacht habe. Meine Lösung verwendet auch jQuery.

Dies dient dazu, die richtige Druckansicht zu verwenden, alle Stylesheets für die richtige Formatierung einzuschließen und auch in den meisten Browsern unterstützt zu werden.

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

Später brauchen Sie einfach so etwas:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

Versuch es.

Ivijan Stefan Stipić
quelle

-1

Gleich wie die beste Antwort, nur für den Fall, dass Sie das Bild wie ich drucken müssen:

Wenn Sie ein Bild drucken möchten:

function printElem(elem)
    {
        Popup(jQuery(elem).attr('src'));
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<img src="'+data+'" />');
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

Goran Jakovljevic
quelle

Sie verpassen ein loadEreignis im Popup. Ohne sie drucken Sie eine leere Seite, da das Bild nicht geladen wird. =>$(popup).load(function(){ popup.focus(); popup.print(); });

Tim Vermaelen

-4

Der beste Weg, dies zu tun, wäre, den Inhalt des div an den Server zu senden und ein neues Fenster zu öffnen, in dem der Server diesen Inhalt in das neue Fenster einfügen könnte.

Wenn dies keine Option ist, können Sie versuchen, eine clientseitige Sprache wie Javascript zu verwenden, um alles auf der Seite außer diesem div auszublenden und dann die Seite zu drucken ...

Sonny Boy
quelle

1

Sie müssen es nicht auf den Server übertragen. Sie können ein Browserfenster öffnen, den Inhalt festlegen und den Druckbefehl aufrufen.

Jonathon Faust

Sie können vom Client aus ein neues Fenster erstellen.

Pointy

1

Jonathon: Ich mag diese Lösung. Haben Sie einen Beispielcode?

Usertest

Drucken Sie den Inhalt eines DIV

Antworten: