web-dev-qa-db-fra.com

Comment imprimer un tableau avec Javascript?

J'ai trouvé ce code à imprimer en Javascript.

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

L'ID d'élément "printTable" est l'ID de la table que je veux imprimer mais, malheureusement, seul le contenu de la table est imprimé, pas le style de la table. Je veux juste avoir des frontières dessus pour qu'il soit plus facile à lire en version imprimée. Quelqu'un peut-il m'aider? 

javascripthtml-table
11
Paul

Voici votre code dans un exemple jsfiddle. Je l'ai testé et ça a l'air bien.

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

J'ai utilisé un tableau simple. Il manque peut-être du CSS sur votre nouvelle page créée avec JavaScript.

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

Vous pouvez également utiliser un plugin jQuery pour le faire

Plugin jQuery PrintPage

Démo

5
Shibbir Ahmed

Une solution insolente: 

  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>
4
Roy M J

Mes camarades,

En janvier 2019, j'ai utilisé un code créé auparavant:

 <script type="text/javascript">   
    function imprimir() {
        var divToPrint=document.getElementById("ConsutaBPM");
        newWin= window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();
    }
</script>

Pour comprendre: ConsutaBPM est un DIV contenant des phrases et des tableaux. Je voulais imprimer TOUT, titres, tableau et autres. Le problème était quand nous avons essayé d'imprimer la table ...

La table peut être définie avec BORDER et CELLPADDING: 

<table border='1' cellpadding='1' id='Tablbpm1' >

Cela a bien fonctionné !!!

0
Dlorko