Wie Tabelle mit Javascript drucken?

Ich habe diesen Code in Javascript gefunden.Wie Tabelle mit Javascript drucken?

function printData() 
{ 
    var divToPrint=document.getElementById("printTable"); 
    newWin= window.open(""); 
    newWin.document.write(divToPrint.outerHTML); 
    newWin.print(); 
    newWin.close(); 
}

Die Element-ID „printTable“ ist die ID der Tabelle, die ich drucken möchten, aber leider ist es druckt nur den Inhalt der Tabelle und nicht den Stil der Tabelle. Ich möchte nur Grenzen haben, damit es im Druck leichter zu lesen ist. Kann mir jemand helfen? Danke voraus.

Quelle

2014-01-27 Paul

Wie Dimshik in seiner Antwort sagte, wenn Sie ein neues Fenster öffnen - Sie tragen keine CSS- oder JavaScript-Dateien, die Sie auf Ihrer Hauptseite hatten, es ist wie eine leere neue Instanz/Fenster. Deshalb sind deine Tischstile ziemlich kahl; Sie müssen CSS-Stile hinzufügen. – MackieeE

Wie kann ich CSS-Dateien anhängen, die in das neue Fenster übertragen werden sollen? Ich versuchte dimshiks Ansatz, aber ich habe dicke Grenzen .. – Paul

das ist, weil er Standard-HTML-Grenzen mit dem Attribut 'border = "1"' anwendet, obwohl dies eine alte und nicht standardisierte Art und Weise Grenzen mit HTML4-5 (Afterall, es war nur ein einfaches Beispiel). Sie können entweder ein Stylesheet in den Kopf des neuen Fensters einfügen oder der Tabelle Inline-Styles hinzufügen. – MackieeE

Hier ist Ihr Code in einem Beispiel-Beispiel. Ich habe es getestet und es sieht gut aus.

http://jsfiddle.net/dimshik/9DbEP/4/

benutzen ich eine einfache Tabelle, vielleicht fehlen Sie einige CSS auf Ihre neue Seite, die mit JavaScript erstellt wurde.

<table border="1" cellpadding="3" id="printTable"> 
    <tbody><tr> 
     <th>First Name</th> 
     <th>Last Name</th>  
     <th>Points</th> 
    </tr> 
    <tr> 
     <td>Jill</td> 
     <td>Smith</td>  
     <td>50</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td>   
     <td>94</td> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>Doe</td>   
     <td>80</td> 
    </tr> 
    <tr> 
     <td>Adam</td> 
     <td>Johnson</td>   
     <td>67</td> 
    </tr> 
</tbody></table>

Quelle

2014-01-27 08:44:51 dimshik

danke. Ich habe es versucht und es funktioniert, aber wie mache ich die Grenzen dünner? – Paul

dort ist dieses oldschool Werkzeug für Tabellenanreden :) [Tabellen-Art] (http://www.somacon.com/p141.php) – dimshik

ich habe immer Respekt für Leute, die jiffdle Verbindungen hinzufügen – danielad

Sie können auch ein jQuery-Plugin verwenden zu tun, dass

jQuery PrintPage plugin

Demo

Quelle

2014-01-27 08:53:45

OP sagt klar: 'Tabelle mit Javascript drucken?' –

ist OK. es ist nur eine zusätzliche Option –

Eine freche Lösung:

function printDiv(divID) { 
     //Get the HTML of div 
     var divElements = document.getElementById(divID).innerHTML; 
     //Get the HTML of whole page 
     var oldPage = document.body.innerHTML; 
     //Reset the page's HTML with div's HTML only 
     document.body.innerHTML = 
      "<html><head><title></title></head><body>" + 
      divElements + "</body>"; 
     //Print Page 
     window.print(); 
     //Restore orignal HTML 
     document.body.innerHTML = oldPage; 

    }

HTML:

<form id="form1" runat="server"> 
    <div id="printablediv" style="width: 100%; background-color: Blue; height: 200px"> 
     Print me I am in 1st Div 
    </div> 
    <div id="donotprintdiv" style="width: 100%; background-color: Gray; height: 200px"> 
     I am not going to print 
    </div> 
    <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" /> 
</form>

Quelle

2014-01-27 08:58:16

Wie Tabelle mit Javascript drucken?

Antwort

Verwandte Themen