Print a table from an html page

Question

I have a html page, from which a table needs to be sent to a printer. I am using window.print right now.. but that prints the whole page... while I need to print just the table. Any ideas?

Solution 1

1. You can use media types print (here is tips, how print html page using stylesheets).

2. You can realize that through popup window - in this window show only table and send it to printer.

Simple example

<script>
    function printDiv() {
        var divToPrint = document.getElementById('areaToPrint');
        newWin = window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();
   }
</script>

Solution 2

You can give style display:none to all unwanted portions of the page. In that way you can print only table.

for ex:

<style>
    @media only print {
        footer, header, .sidebar {
            display:none;
        }
    }
</style>

Comments

[user1263746]

The example does not open a new window... does nothing. Any hints?

[yAnTar]

1. Do you have div with id areaToPrint ? 2. In previous code i had small syntax error - getEElement. Now i check example - all works.

[user1263746]

outerHTML has known issue with firefox and chrome... but the issue is resolvable. Thanks!

[Guillermo Gutiérrez]

Don't forget to close the document after finishing writing: newWin.document.close();

[Guillermo Gutiérrez]

Very creative way to do it! +1

[LYKS]

I tried this but I need to include the link for the CSS stylesheet for me to get the desired print output. How do I do that?

[yAnTar]

You should add newWin.document.write('<link rel="stylesheet" type="text/css" href="path_to_your_css_file">')