Click here to Skip to main content
Click here to Skip to main content

Tagged as

Print Div Content Using JavaScript

, 4 Dec 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
JavaScript to print Div content.

Introduction

This is a small trick which I want to share with you all where instead of printing an entire window we can print a section from the page.  

Using the code

On the click of a button I have called JavaScript printDiv which will print the first DIV content.

Please refer to the below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script language="javascript" type="text/javascript">
        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;

          
        }
    </script>

</head>
<body>
    <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>
</body>
</html>

Points of Interest

This trick is very basic but nevertheless very effective.

History 

Please revert with your comments if you have any query.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rakesh S S

India India
I am a Software Developer with 2 years of working Experience on C#,ASP.NET,SQL SERVER,Javascript,Jquery

Comments and Discussions

 
QuestionSecond time not a single button works Pinmemberappasaheb18-Aug-14 19:52 
GeneralThanks, My 5 votes PinmemberShato16-Apr-14 20:57 
SuggestionDoes not work if you have JS events hooked up [modified] PinmemberMetalKid00711-Feb-14 9:00 
BugWorking for me by Removing <title> tag. Pinmember VICK28-Oct-13 19:49 
GeneralMy vote of 4 Pinmemberupenn876-Aug-13 0:24 
GeneralMy vote of 5 Pinmemberishtiaq ahmed khan12-Jul-13 5:52 
QuestionIts not working when image in div tag with google chrome Pinmembersanchu9015-May-13 2:21 
GeneralNice! PinmemberMember 38849885-Dec-12 5:37 
GeneralRe: Nice! PinmemberRakesh S S9-Dec-12 0:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 4 Dec 2012
Article Copyright 2012 by Rakesh S S
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid