www.webdeveloper.com
Results 1 to 3 of 3

Thread: screenshot div into new window and print

  1. #1
    Join Date
    Jan 2010
    Posts
    127

    screenshot div into new window and print

    I have a div, with checkboxes in, which I want to be able to print.

    I can open the div, and print, with the following code:

    Code:
    var prtContent = document.getElementById("main");
        var WinPrint = window.open('', '', 'letf=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    	WinPrint.document.write(prtContent.innerHTML);
    	WinPrint.document.close();
    	WinPrint.focus();
    	WinPrint.print();
    	WinPrint.close();
    However, all the checkboxes are blank, no matter how many are ticked in the div before pressing the 'print' button I set up.

    Also, since this is unstyled, and I have custom checkboxes, how would I go about getting the images to print (if I put the css in, they display on the new window, but if I print the page they are missing?)

    Thanks in advance,

    Aravona.
    L.U.N.E for anyone and everyone who has an interest in literature

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    Your code is just taking the raw HTML from your page and displaying it in a new pop-up window. It doesn't have any stylesheet associated with it so it's unstyled, and it won't reflect the user's checkbox selections.

    To do what you want, you'll need to create a separate, complete HTML document that will display the <div> in your pop-up window, and use JavaScript to set the appropriate checkboxes before printing.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2010
    Posts
    127
    Actually not hard to get the CSS in the new window, like I said I can do that. Was simpler to just cut out the new window and print the div I have.
    L.U.N.E for anyone and everyone who has an interest in literature

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles