Write Content To New Window with JQuery

Question

I have a web page with a DIV element in it. When a user clicks "print", I want to print the contents of that div. Please note, I only want to print the contents of the DIV, not the entire page. To attempt this, I decided I would open a new window using JavaScript. I was then going to write the contents of the DIV into the new window. My question is, is this possible with JQuery? If so, how? Currently, I'm trying the following:

function printClick() {
  var w = window.open();
  var html = $("#divToPrintID").html();

  // how do I write the html to the new window with JQuery?
}

Here's a similar thread: http://stackoverflow.com/questions/1225558/jquery-new-window-with-content-from-modal-content-on-opener-page — orolo, Oct 01 '10 at 16:29

score 53 · Answer 1 · answered Oct 01 '10 at 16:33

53

You can use

$(w.document.body).html(html);

See this example

answered Oct 01 '10 at 16:33

Steve Greatrex

15,789
5
59
73

This doesn't seem to work in IE7 for me. Any known issues with that? – wonza Jan 09 '13 at 14:34

score 5 · Answer 2 · answered Oct 01 '10 at 16:29

5

Try -

var w = window.open();
var html = $("#divToPrintID").html();
w.document.writeln(html);

Reference - http://www.javascripter.net/faq/writingt.htm

answered Oct 01 '10 at 16:29

Alpesh

5,307
2
19
19

score 4 · Answer 3 · answered Oct 01 '10 at 16:27

file1:

function find(input){
    return $(input);
}

function printClick() {
  var w = window.open();
  var html = $("#divToPrintID").html();

  // how do I write the html to the new window with JQuery?
}

and in the second file do that:

var html = window.opener.find("#divToPrintID").html();

score 2 · Answer 4 · answered Oct 01 '10 at 16:30

2

I found a pretty perfect match of a tutorial for exactly that.. http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm

Additionally, you can attact print-only CSS to the page that has everything but what you want turned off.

answered Oct 01 '10 at 16:30

FatherStorm

7,133
1
21
27

Write Content To New Window with JQuery

4 Answers4

Linked