How do I open a new window/tab and dynamically fill it with content?

I am building a website that displays recipes. Each recipe appears as part of a blog entry, and will have a link at the bottom to Print this r开发者_如何学Pythonecipe.

What I want to happen is a click on the link opens a new window and fills it with a print-friendly-styled version of the recipe, which is already inside its own <div class="recipe">.

Can I do this with JS/jQuery alone, or do I need to process from the server side? Any ideas how to do this?

EDIT: What would be ideal would be to generate a PDF on the fly, but in lieu of that I'd like a new window, containing only the recipe, for the visitor to print out or save, as they see fit. Print-styles are nice, but most people don't know they exist and can't be bothered to check and see by printing out a page that doesn't look print ready.

---

There is no need to load a different stylesheet and the only javascript you will need is for triggering the printing dialog.

With CSS alone you can add rules that are only used when printing, you can either use media queries

<style type="text/css">
@media print{
    //css printing rules
}
</style>

or use the link tag:

<link rel="stylesheet" media="print" href="styles.css" type="text/css" />

UPDATE: If you want to update the stylesheet on the fly without openning a new window i suggest you check out this Nettuts article or a simpler solution:

$("#css-switch").click(function() {
     $("link[rel=stylesheet]").attr({href : "red.css"});
});

---

You can do this simply with CSS alone if you have it load the exact same page but with a different stylesheet.

---

Yes, you can(Hello Mr. Obama).

Most browsers allow you to pass in a data: format string, like

window.open('data:text/html;charset=utf-8,text%20to%20show');

which would open a new window / tab (that is browser config dependend) with the Content "text to show". You can pass in HTML code in the same manner, probably escaped.

var print = $('<div>', {
   id:   'foobar',
   html: 'Hello world',
   css:  {
      backgroundColor:   '#ff0000',
      color:    '#ffffff',
      width:    '200px',
      height:   '200px'
   }
}),
opener = $('<div>').append(print);

window.open('data:text/html;charset=utf-8,' + opener.html());

Demo: http://www.jsfiddle.net/4yUqL/73/

---

You'll probably need to do a request to the server on the print page and fill in the form fields with the data.

---

If i was you, i'd go for the pdf creating solution. It is fairly simple to create pdf's on the fly in php, and it will almost certainly give a better user experience to your main audience.

If you want to skip that excersise, i'd do it the following way:

1: fetch the data you need as JSON on the original non-printerfriendly page, and use clientside templating to build the ui. Store the JSON for use on the printerfriendly page

2: when you open the new window, use the exact same method, but use another template optimized for printing.