Printing contents of a div using javascript

Guys this is a nice piece of code which has been tested in IE7 to print the contents of a div. I got this code from http://www.webdeveloper.com/forum/showthread.php?t=152798

While printing keep in mind that on the printed copy you will lose all css styles.


 Print  
content

Tags: , , , ,

19 Responses to “Printing contents of a div using javascript”

  1. Msdnexpert says:

    To print just a div the following code works. Of course you need to replace the id of the div with your id.

    function PrintContent()
    {
    var DocumentContainer = document.getElementById(‘divtoprint’);
    var WindowObject = window.open(”, “PrintWindow”,
    “width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes”);
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
    }

  2. thanksAMillion says:

    I used Msdnexpert’s code and it works perfectly! I’ve been trying to get this to work for weeks now on and off. Thanks a Million!

  3. thanksAMillion says:

    Also I should note that I’m using inside Drupal… another reason why there were roadblocks…

  4. anhnt says:

    Thank!
    But, your resolve only deal with label (if i make label change). However with radio or checkbox that status of check is inputted by user or javascript prints unsuccessfully.
    I’m using firefox and see that. But IE may be correct. I don’t know the options in firefox and when see on firebug, i see the text (innerHtml) for label inserted in source but check for radio can’t be inserted.

  5. Dana says:

    Hello,

    I find this very helpful, but I have 1 problem.
    I would like to keep my css styling in the printed form.
    The styling is removed when printing.
    Is there a way to keep it?

    Thank you,
    Dana

  6. Aamir Shahzad says:

    Assalam-u-Alaikum,

    I find this very helpful,
    thanks buddy
    <!–
    function ClickHereToPrint(){
    try{
    var oIframe = document.getElementById(‘ifrmPrint’);
    var oContent = document.getElementById(‘divToPrint’).innerHTML;
    var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
    if (oDoc.document) oDoc = oDoc.document;
    oDoc.write(“title”);
    oDoc.write(“”);
    oDoc.write(oContent + “”);
    oDoc.close();
    }
    catch(e){
    self.print();
    }
    }
    // –>

  7. Jay Jay says:

    It doesn’t work on me. huhuh =(

  8. Jet says:

    Hello!
    I’d been trying to print the div content with no luck.
    i can’t even capture the innertext nor innerhtml with code (i’m working with asp.net).
    In fact what i want to print are the directions produced by google maps for a given route.
    The code kindly posted by msdnExpert breakes here:

    WindowObject.document.writeln(DocumentContainer.innerHTML);
    The Err Message is:
    Microsoft JScript runtime error: Object required

    For any help
    Thanks a lot.

  9. sin says:

    try giving EnableEventValidation=”false” in page directive

  10. Jaganath says:

    It Works Fine in My Website

  11. Emmanuel says:

    to keep the css styles link your css file:
    “”

    before close the header:

    oDoc.write(“”);

    Example:
    oDoc.write(“title”);
    oDoc.write(“”);
    oDoc.write(“”);
    oDoc.write(oContent + “”);

  12. Sangmesh Khandomalke says:

    Thanks for this wonderful solution

  13. me says:

    thanks.
    it work out for me.

  14. CTechnology says:

    This code worked for me,, but how can I target for print a specific div if their are another div that has the same name because I use PHP to iterate a div and use this javascript to print its content, can I use array to target it?

  15. Tracy says:

    Hi, you have to open, for example, comurses_listCategoriesandProducts.asp and addin the SQL sentence that list products the field Visits.Then, you have to assign the value to a new variable, like this:pVisits= rstemp( visits ) Finaly, you have to show the value in itemDetailsSm.asp:Popularity: []