How to print table using Javascript?

Question

I found this code to print in Javascript.

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

The element ID "printTable" is the ID of the table that I want to print but unfortunately it only prints out the contents of the table and not the style of the table. I just want to have borders on it so that it is easier to read in print. Can anyone help me?

As dimshik stated in his answer, when you open up a new window - you're not carrying across any CSS or JavaScript files that you had on your main page, it's like an empty new instance/window. So that's why your table styles is quite bare; you'll need to add CSS Styles. — MackieeE
– MackieeE, Commented Jan 27, 2014 at 8:59
so how do I attach css files to be carried to the new window? i tried dimshiks approach but i got thick borders.. — TheGPWorx
– TheGPWorx, Commented Jan 28, 2014 at 9:12
that's because he's applying standard HTML borders with the border="1" attribute, although this is an old & unstandardised way of applying borders with HTML4-5 (Afterall, it was just an simple example). You could either: inject a stylesheet to the head of the new window, or add inline styles to the table. — MackieeE
– MackieeE, Commented Jan 28, 2014 at 9:25

dimshik · Accepted Answer · 2014-02-26 09:32:04Z

39

Here is your code in a jsfiddle example. I have tested it and it looks fine.

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

I used a simple table, maybe you are missing some CSS on your new page that was created with 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>

edited Feb 26, 2014 at 9:32

answered Jan 27, 2014 at 8:44

dimshik

1,29115 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TheGPWorx Over a year ago

thanks,. i tried and it work but how do i make the borders thinner?

dimshik Over a year ago

there is this oldschool tool for table styling :) Table Style

Daniel Wondyifraw Over a year ago

i always do have respect fo rpeople who add jiffdle links

Daniel Wondyifraw Over a year ago

what about adding header and footer

Joseph M Over a year ago

What should be done if we want to put styles from CSS files?.. instead of inline CSS..

Roy M J · Accepted Answer · 2014-01-27 08:58:16Z

9

One cheeky solution :

  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>

answered Jan 27, 2014 at 8:58

Roy M J

6,9367 gold badges54 silver badges79 bronze badges

1 Comment

CyberClaw Over a year ago

Well that's a smart way to save some time

Shibbir Ahmed · Accepted Answer · 2014-01-27 08:53:45Z

5

You can also use a jQuery plugin to do that

jQuery PrintPage plugin

Demo

answered Jan 27, 2014 at 8:53

Shibbir Ahmed

1,35013 silver badges21 bronze badges

1 Comment

Shibbir Ahmed Over a year ago

its OK. its just an extra option

Dlorko · Accepted Answer · 2019-01-15 18:36:29Z

5

My fellows,

In January 2019 I used a code made before:

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

To undestand: ConsutaBPM is a DIV which contains inside phrases and tables. I wanted to print ALL, titles, table, and others. The problem was when TRIED to print the TABLE...

The table mas be defined with BORDER and CELLPADDING:

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

It worked fine!!!

answered Jan 15, 2019 at 18:36

Dlorko

1272 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to print table using Javascript?

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related