Click here to Skip to main content
12,445,004 members (54,467 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

156K views
13 bookmarked
Posted

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
BugDoes not work with iOS / mobile devices with /a Javascript Pin
Dennis Heinrich24-Jul-16 23:23
memberDennis Heinrich24-Jul-16 23:23 
Questionprint Div problems Pin
Member 1211617223-Dec-15 0:39
memberMember 1211617223-Dec-15 0:39 
Bugcss is not coming to the print window Pin
MehtaVikas4-Nov-15 2:01
memberMehtaVikas4-Nov-15 2:01 
QuestionIt is printing but printing small Pin
JamaicanMember20-Jul-15 9:56
memberJamaicanMember20-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
memberappasaheb18-Aug-14 19:52 
AnswerRe: Second time not a single button works Pin
Darked24-May-15 23:35
memberDarked24-May-15 23:35 
GeneralThanks, My 5 votes Pin
Shato16-Apr-14 20:57
memberShato16-Apr-14 20:57 
SuggestionDoes not work if you have JS events hooked up Pin
MetalKid00711-Feb-14 9:00
memberMetalKid00711-Feb-14 9:00 
BugWorking for me by Removing <title> tag. Pin
VICK28-Oct-13 19:49
member VICK28-Oct-13 19:49 
GeneralMy vote of 4 Pin
upenn876-Aug-13 0:24
memberupenn876-Aug-13 0:24 
GeneralMy vote of 5 Pin
ishtiaq ahmed khan12-Jul-13 5:52
memberishtiaq ahmed khan12-Jul-13 5:52 
QuestionIts not working when image in div tag with google chrome Pin
sanchu9015-May-13 2:21
membersanchu9015-May-13 2:21 
GeneralNice! Pin
Member 38849885-Dec-12 5:37
memberMember 38849885-Dec-12 5:37 
GeneralRe: Nice! Pin
Rakesh S S9-Dec-12 0:39
memberRakesh 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.

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