Print HTML Table with Image using JavaScript

An HTML table can contain different types of data and can hold different elements like the IMG element or a list element etc. You can save the contents in a text file or export the table data to an Excel file. You can also print the table or convert the table to PDF. I am sharing an example here, which shows how to print an HTML table with image using pure JavaScript.

We do sometimes use many images on our web page and often embed these images inside an HTML element. I’ll show you how you can easily print the contents of an HTML table, along with the images.

The HTML Table with the Print Code

<html>
<head>
    <style>
        table
        {
            width: auto;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        img 
        {
            width: 50%;
        }
    </style>
</head>
<body>
	<div>
        <table id="tab"> 
            <tr>
                <th>Bird Name</th>
                    <th>Scientific Name</th>
                        <th>Image</th>
            </tr>
            <tr>
                <td>Bald Eagle</td>
                    <td>Haliaeetus leucocephalus</td>
                        <td><img src="https://www.encodedna.com/images/theme/bald-eagle.png" alt="Bald Eagle" /></td>
            </tr>
            <tr>
                <td>Morning Dove</td>
                    <td>Zenaida macroura</td>
                        <td><img src="https://www.encodedna.com/images/theme/morning-dove.png" alt="Morning Dove" /></td>
            </tr>
        </table>
    </div>

    <p>
        <input type="button" value="Print Table" onclick="myApp.printTable()" />
    </p>
</body>
<script>
    var myApp = new function () {
        this.printTable = function () {
            var tab = document.getElementById('tab');
            var win = window.open('', '', 'height=700,width=700');
            win.document.write(tab.outerHTML);
            win.document.close();
            win.print();
        }
    }
</script>
</html>

Try it

I have a table with two rows and two columns. Each row has an image. In the <script> section, I have function that prints the contents of the table.

First, I am extracting the contents from the HTML table using the table’s id. Next, I am using the window object, which will open a window using window.open() method. I have defined the window height and width.

Later, I am writing the contents of the table using the window object.

win.document.write ();

After closing the object, I am finally printing the contents.

Add Style to the Print

You can dynamically add some style, like borders etc. to the table before printing it. For example, see the variable var style in the code below.

var tab = document.getElementById('tab');

var style = "<style>";
style = style + "table {width: 100%; font: 17px Calibri;}";
style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
style = style + "padding: 2px 3px; text-align: center;}";
style = style + "</style>";

var win = window.open('', '', 'height=700,width=700');
win.document.write(style);          //  add the style.

Try it

Finally, write the style using the win object.

Use data uri of Image to Print

In-addition, you can use the data uri of an image as the <img> source. A data URI, prefixed with data: scheme, allows developers to add data inline in web pages. It’s a light-weight option that can be used to enhance the performance of a website with lots of images.

In my next blog post, I’ll show you how to create data uri of an image using JavaScript.

← PreviousNext →