Click here to Skip to main content
15,868,292 members
Articles / Programming Languages / Javascript
Tip/Trick

Print Div Content Using JavaScript

Rate me:
Please Sign up or sign in to vote.
4.33/5 (14 votes)
4 Dec 2012CPOL 299.2K   14   18
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:

XML
<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)


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

Comments and Discussions

 
GeneralMy vote of 4 Pin
Member 1362192413-Jan-18 20:18
Member 1362192413-Jan-18 20:18 
QuestionDynamic content not appearing in print Pin
Member 1328772030-Jun-17 21:25
Member 1328772030-Jun-17 21:25 
BugDoes not work with iOS / mobile devices with /a Javascript Pin
Dennis Heinrich24-Jul-16 23:23
Dennis Heinrich24-Jul-16 23:23 
Questionprint Div problems Pin
Member 1211617223-Dec-15 0:39
Member 1211617223-Dec-15 0:39 
Bugcss is not coming to the print window Pin
MehtaVikas4-Nov-15 2:01
MehtaVikas4-Nov-15 2:01 
QuestionIt is printing but printing small Pin
JamaicanMember20-Jul-15 9:56
JamaicanMember20-Jul-15 9:56 
Questionthanks Pin
vishwajeetrkale7-May-15 19:44
professionalvishwajeetrkale7-May-15 19:44 
QuestionSecond time not a single button works Pin
appasaheb18-Aug-14 19:52
appasaheb18-Aug-14 19:52 
AnswerRe: Second time not a single button works Pin
Darked24-May-15 23:35
Darked24-May-15 23:35 
GeneralThanks, My 5 votes Pin
Shato16-Apr-14 20:57
Shato16-Apr-14 20:57 
SuggestionDoes not work if you have JS events hooked up Pin
MetalKid00711-Feb-14 9:00
MetalKid00711-Feb-14 9:00 
BugWorking for me by Removing <title> tag. Pin
VICK28-Oct-13 19:49
professional VICK28-Oct-13 19:49 
GeneralMy vote of 4 Pin
upenn876-Aug-13 0:24
upenn876-Aug-13 0:24 
GeneralMy vote of 5 Pin
ishtiaq ahmed khan12-Jul-13 5:52
ishtiaq ahmed khan12-Jul-13 5:52 
QuestionIts not working when image in div tag with google chrome Pin
sanchu9015-May-13 2:21
sanchu9015-May-13 2:21 
GeneralNice! Pin
MichelWilker5-Dec-12 5:37
MichelWilker5-Dec-12 5:37 
GeneralRe: Nice! Pin
Rakesh S S9-Dec-12 0:39
Rakesh S S9-Dec-12 0:39 

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

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