How to Print Page Area using JavaScript & HTML

Page print in JavaScript is a simple code in JavaScript used to print the content of web pages. In this article, we will share with you a simple way to print specific div content or full-page content using JavaScript. Here we will create a JavaScript function to print div content, page area, and full web page content.

printPage() function contains some JavaScript code that helps you to implement the print feature easily on the web page. This is a very simple example, you can copy-paste, and change it according to your requirement.

JavaScript Code:

You can use this function for print a web page content:

    function printPage(selector, title) {
        var disp_setting="toolbar=yes,location=no,";
        disp_setting+="directories=yes,menubar=yes,";
        disp_setting+="scrollbars=yes,width=1024, height=700, left=100, top=25";
        var content_vlue = document.getElementById(selector).innerHTML;
        var print=window.open("","", disp_setting);
        print.document.open();
        print.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
        print.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
        print.document.write('<html>');
        print.document.write('<head><title>'+title+'</title>');
        print.document.write('<link rel="stylesheet" type="text/css" href="print_stylesheet.css" />');
        print.document.write('</head><body class="A4"><center>');
        print.document.write(content_vlue);
        print.document.write('</center></body></html>');
        setTimeout(function(){
            print.print();
            print.close();
        },500);
        
        print.focus();
    }

function printPage(selector, title) {

var disp_setting="toolbar=yes,location=no,";

disp_setting+="directories=yes,menubar=yes,";

disp_setting+="scrollbars=yes,width=1024, height=700, left=100, top=25";

var content_vlue = document.getElementById(selector).innerHTML;

var print=window.open("","", disp_setting);

print.document.open();

print.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');

print.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');

print.document.write('<html>');

print.document.write('<head><title>'+title+'</title>');

print.document.write('<link rel="stylesheet" type="text/css" href="print_stylesheet.css" />');

print.document.write('</head><body class="A4"><center>');

print.document.write(content_vlue);

print.document.write('</center></body></html>');

setTimeout(function(){

print.print();

print.close();

},500);

print.focus();

}

Use printPage() function on onclick event of print button element and provide the content area div ID which you want to print.

    printPage('element_id', 'page_title')

1	printPage('element_id', 'page_title')

Trigger function – HTML Code:

    <button type="button" name="print_btn" class="btn btn-primary" value="How to Print Page Area using JavaScript" onclick="printPage('print-page', 'Print Page Area using JavaScript')">Print Page</button>

1	<button type="button" name="print_btn" class="btn btn-primary" value="How to Print Page Area using JavaScript" onclick="printPage('print-page', 'Print Page Area using JavaScript')">Print Page</button>

HTML content that you want print

    <section class="sheet padding-5mm A4" id="print-page" style="display:none;">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
    </section>

Lorem Ipsum is simply dummy text of the printing and typesetting industry

</section>

Finally Complete Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>How to Print Page Area using JavaScript - TechArise</title>
    <script type="text/javascript">
        function printPage(selector, title) {
            var disp_setting="toolbar=yes,location=no,";
            disp_setting+="directories=yes,menubar=yes,";
            disp_setting+="scrollbars=yes,width=1024, height=700, left=100, top=25";
            var content_vlue = document.getElementById(selector).innerHTML;
            var print=window.open("","", disp_setting);
            print.document.open();
            print.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
            print.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
            print.document.write('<html>');
            print.document.write('<head><title>'+title+'</title>');
            print.document.write('<link rel="stylesheet" type="text/css" href="print_stylesheet.css" />');
            print.document.write('</head><body class="A4"><center>');
            print.document.write(content_vlue);
            print.document.write('</center></body></html>');
            setTimeout(function(){
                print.print();
                print.close();
            },500);
            
            print.focus();
        }
    </script>

</head>

<body>
	<button type="button" name="print_btn" class="btn btn-primary" value="How to Print Page Area using JavaScript" onclick="printPage('print-page', 'Print Page Area using JavaScript')">Print Page</button>
    <section class="sheet padding-5mm A4" id="print-page" style="display:none;">
        <article>
            <table width="98%" class="w-100">
                <thead>
                    <tr>
                        <td class="text-center p-0 m-0" colspan="2">
                            <h2 class="m-0 text-bold">How to Print Page Area using JavaScript</h2>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <td class=" p-0" colspan="2">
                        <br />
                    <table class="tableBorderAll">
                    <tr>
                        <td class="text-bold" style="width: 33%;text-transform: uppercase;text-align: center;">Name</td>
                        <td class="text-bold p-0 pr-15" style="width: 33%;">Team TechArise</td>
            			<td class="text-bold" style="width: 34%;">Avatar</td>
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Email</td>
                        <td class="text-bold p-0 pr-15">info@techarise.com</td>
                        <td rowspan="7" class="text-bold">
                            <img src="User-Icon-File.png" style="width:100%;padding:5px;">
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Mobile</td>
                        <td class="text-bold p-0 pr-15">9000000001</td>
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Address</td>
                        <td class="text-bold p-0 pr-15">B 45/90, San Francisco</td>
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Country</td>
                        <td class="text-bold p-0 pr-15">United States</td>
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Salary</td>
                        <td class="text-bold p-0 pr-15">$12000</td>
                    </tr>
                    <tr>
                        <td class="text-bold" style="text-transform: uppercase;">Department</td>
                        <td class="text-bold p-0 pr-15">Information technology (IT)</td>
                    </tr>
                    
                    </table>
                    <br>
                    </td>
                </tbody>
            </table>
        </article>
    </section>
</body>

</html>

<!DOCTYPE html>

<head>

<title>How to Print Page Area using JavaScript - TechArise</title>

function printPage(selector, title) {

var disp_setting="toolbar=yes,location=no,";

disp_setting+="directories=yes,menubar=yes,";

disp_setting+="scrollbars=yes,width=1024, height=700, left=100, top=25";

var content_vlue = document.getElementById(selector).innerHTML;

var print=window.open("","", disp_setting);

print.document.open();

print.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');

print.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');

print.document.write('<html>');

print.document.write('<head><title>'+title+'</title>');

print.document.write('<link rel="stylesheet" type="text/css" href="print_stylesheet.css" />');

print.document.write('</head><body class="A4"><center>');

print.document.write(content_vlue);

print.document.write('</center></body></html>');

setTimeout(function(){

print.print();

print.close();

},500);

print.focus();

}

</script>

</head>

<body>

<button type="button" name="print_btn" class="btn btn-primary" value="How to Print Page Area using JavaScript" onclick="printPage('print-page', 'Print Page Area using JavaScript')">Print Page</button>

<thead>

<tr>

<h2 class="m-0 text-bold">How to Print Page Area using JavaScript</h2>

</td>

</tr>

</thead>

<tbody>

<br />

<tr>

<td class="text-bold p-0 pr-15" style="width: 33%;">Team TechArise</td>

<td class="text-bold" style="width: 34%;">Avatar</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Email</td>

<td class="text-bold p-0 pr-15">info@techarise.com</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Mobile</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Address</td>

<td class="text-bold p-0 pr-15">B 45/90, San Francisco</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Country</td>

<td class="text-bold p-0 pr-15">United States</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Salary</td>

</tr>

<tr>

<td class="text-bold" style="text-transform: uppercase;">Department</td>

<td class="text-bold p-0 pr-15">Information technology (IT)</td>

</tr>

</table>

<br>

</td>

</tbody>

</table>

</article>

</section>

</body>

</html>