Wie drucke ich Teile einer gerenderten HTML-Seite in JavaScript?

Der JavaScript-Code window.print() kann die aktuelle HTML-Seite drucken.Wie drucke ich Teile einer gerenderten HTML-Seite in JavaScript?

Wenn ich ein div in einer HTML-Seite habe (z. B. eine Seite gerendert von einer ASP.NET MVC Ansicht), dann möchte ich nur das div drucken.

Gibt es einen jQuery unobtrusive JavaScript oder normalen JavaScript-Code, um diese Anfrage zu implementieren?

machen es klar, das gerenderte HTML-Seite annehmen, ist wie:

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head id="Head" runat="server"> 
     <title> 
      <asp:ContentPlaceHolder runat="server" ID="TitleContent" /> 
     </title> 
    </head> 

    <body> 
      <div id="div1" class="div1">....</div> 
      <div id="div2" class="div2">....</div> 
      <div id="div3" class="div3">....</div> 
      <div id="div4" class="div4">....</div> 
      <div id="div4" class="div4">....</div> 
     <p> 
      <input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /> 
     </p> 
    </body> 
</html>

Dann habe ich auf die Schaltfläche Drucken klicken möchten, nur div3 drucken.

Quelle

2009-07-02 KentZhou

ich darüber etwas weitergehen würde:

<html> 
    <head> 
     <title>Print Test Page</title> 
     <script> 
      printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">') 
      function printDiv(divId) { 
       window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML; 
       window.frames["print_frame"].window.focus(); 
       window.frames["print_frame"].window.print(); 
      } 
     </script> 
    </head> 

    <body> 
     <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1> 
     <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br> 
     <div id="div1">This is the div1's print output</div> 
     <br><br> 
     <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br> 
     <div id="div2">This is the div2's print output</div> 
     <br><br> 
     <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br> 
     <div id="div3">This is the div3's print output</div> 
     <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe> 
    </body> 
</html>

Quelle

2009-07-02 02:33:39

Danke. Diese Lösung funktioniert gut. – KentZhou

Aber was ist der Vorschlag von printDivCSS? Es scheint nicht nötig zu sein, es zu benutzen. – KentZhou

printDivCSS ist nur vorhanden, wenn Sie formatieren müssen, was Sie mit einem Stylesheet drucken. Wenn Sie nicht möchten, dass Ihr gedruckter Text mit einem Stylesheet formatiert wird, brauchen Sie ihn nicht. –

Sie könnten ein Druck-Stylesheet verwenden, dies wirkt sich jedoch auf alle Druckfunktionen aus.

Sie könnten versuchen, ein Druck-Stylesheet externallyly, und es ist per JavaScript enthalten, wenn eine Taste gedrückt wird, und rufen Sie dann window.print(), dann danach entfernen Sie es.

Quelle

2009-07-02 00:30:19 alex

Dies funktionieren würde, aber mit einigen Änderungen, um die Seite "zurücksetzen" zu lassen, nachdem Sie Ihr Ziel gedruckt haben. (Wie Sie bereits angemerkt haben, wäre dies ein Problem.) Öffnen Sie zum Beispiel kurz vor dem Drucken ein modales Fenster oder eine Art Overlay, das anzeigt, dass jetzt gedruckt werden kann (oder rufe window.print() auf) und wenn der Benutzer klickt OK oder Schließen, die Stylesheets können sich selbst zurücksetzen. – Funka

Oh, Sie müssen auch nicht unbedingt eine externe CSS-Datei dynamisch geladen haben, Sie könnten es vorinstalliert haben, aber passen Sie einfach die Klassen auf Ihrem Ziel-Div oder anderen Container an, wenn Sie zum Drucken bereit sind. (Und entfernen Sie die Klassen, wenn Sie fertig sind.) – Funka

-1

Wie wäre es mit Canvas? In ein neues Fenster zeichnen und dann die Methode print() aus dem neuen Fenster aufrufen?

können Sie weitere Dokumentation über finden Sie hier: drawWindow()

Quelle

2009-07-02 02:04:06 Paul

In die gleiche Richtung, wie einige der Vorschläge, die Sie müssten zumindest tun das folgende:

laden einige CSS dynamisch durch JavaScript
Craft einige Druck -spezifische CSS-Regeln
Wenden Sie Ihre Phantasie CSS-Regeln durch JavaScript

Ein Beispiel CSS, da dies könnte so einfach sein:

@media print { 
    body * { 
    display:none; 
    } 

    body .printable { 
    display:block; 
    } 
}

Ihr JavaScript würde dann nur noch die „printable“ Klasse anwenden zu deinem Zieldiv und es wird das einzige Ding sein, das sichtbar ist (solange es keine anderen in Konflikt stehenden CSS-Regeln gibt - eine getrennte Übung), wenn Drucken geschieht.

<script type="text/javascript"> 
    function divPrint() { 
    // Some logic determines which div should be printed... 
    // This example uses div3. 
    $("#div3").addClass("printable"); 
    window.print(); 
    } 
</script>

Vielleicht möchten Sie die Klasse aus dem Ziel ggf. entfernen nach dem Drucken aufgetreten ist, und/oder entfernen Sie die dynamisch hinzugefügt CSS nach dem Drucken aufgetreten ist.

Unten ist ein voll funktionierendes Beispiel, der einzige Unterschied ist, dass das Druck-CSS nicht dynamisch geladen wird. Wenn Sie möchten, dass es wirklich unauffällig ist, dann müssen Sie load the CSS dynamically like in this answer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Print Portion Example</title> 
    <style type="text/css"> 
     @media print { 
     body * { 
      display:none; 
     } 

     body .printable { 
      display:block; 
     } 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 

    <body> 
    <h1>Print Section Example</h1> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div4">Div 4</div> 
    <div id="div5">Div 5</div> 
    <div id="div6">Div 6</div> 
    <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p> 
    <script type="text/javascript"> 
     function divPrint() { 
     // Some logic determines which div should be printed... 
     // This example uses div3. 
     $("#div3").addClass("printable"); 
     window.print(); 
     } 
    </script> 
    </body> 
</html>

Quelle

2009-07-02 07:00:23

Danke. Es scheint nicht richtig zu funktionieren. – KentZhou

Für FF druckt diese Lösung die gesamte Seite mit div3. Für IE7 druckt diese Lösung die gesamte Seite, ersetzt aber div3 durch Leerzeichen. – KentZhou

Welche Version von Firefox? Als ich das mit IE getestet habe, war es mit IE6 und es funktioniert korrekt - Drucken nur "Div 3". Firefox 3.5.2 zeigt das gleiche Verhalten. Google Chrome 2.0.172.43 zeigt dasselbe Verhalten. Vielleicht verstehe ich deine Anforderungen nicht. –

Versuchen Sie diesen JavaScript-Code:

function printout() { 

    var newWindow = window.open(); 
    newWindow.document.write(document.getElementById("output").innerHTML); 
    newWindow.print(); 
}

Quelle

2014-07-29 20:47:48

Das spuckte gerade eine unformatierte Tabelle auf eine neue Registerkarte für mich. Nichts gedruckt. – SteveCav

Ich möchte keinen neuen Bildschirm öffnen. HABEN SIE JEDE MÖGLICHKEIT, EINEN TEIL DER SEITE IN DIE AKTUELLE SEITE ZU DRUCKEN? – huykon225

<div id="invocieContainer"> 
    <div class="row"> 
     ...Your html Page content here.... 
    </div> 
</div> 

    <script src="/Scripts/printThis.js"></script> 
     <script> 
       $(document).on("click", "#btnPrint", function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        $("#invocieContainer").printThis({ 
         debug: false,    // show the iframe for debugging 
         importCSS: true,   // import page CSS 
         importStyle: true,   // import style tags 
         printContainer: true,  // grab outer container as well as the contents of the selector 
         loadCSS:"/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple 
         pageTitle: "",    // add title to print page 
         removeInline: false,  // remove all inline styles from print elements 
         printDelay: 333,   // variable print delay; depending on complexity a higher value may be necessary 
         header: null,    // prefix to html 
         formValues: true   // preserve input/form values 
        }); 

       }); 
      </script>

Für printThis.js Code souce, kopieren und PASE unter URL in neuem Tab https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

Quelle

2016-06-17 11:07:48

Wie drucke ich Teile einer gerenderten HTML-Seite in JavaScript?

Antwort

Verwandte Themen