Printing, Revisited

Kevin M Schreiner | Jun 17 2010 | 1 Comments

Chad Nash sent me an email yesterday and wanted to respond before I headed out on holiday. However, I decided it would be more fruitful to provide a more robust answer to him and the OpenWebStudio community to make sure everyone has access to the capability. The posted question from the email was straight forward:

"we have a client that was wondering if the module can support in any way a ‘Print’ for the GRID.  I realize you can do an export and so forth but they were wanting to know if another client has run into this before."

The reason it took me awhile to respond was pretty simple. I knew that I had posted an answer posed like this on the Bi4ce forum for ListX over two years ago, but because we had merged companies, upgraded dotnetnuke, replaced/swapped in and out active forums and converted back to dotnetnuke forums - the post was difficult to locate. Yes, even google had trouble!

So to move on - the original logic which still works okay is identified here:

As I read through the old code, i realized that there was both a fundamental problem with the Print logic I created, and that there was some new functionality that I could use to improve the capabilities.

The fundamental problem is that the original logic is ANNOYING. The user clicks PRINT, and then a new window pops up (as long as it wasn't blocked to begin with). This new "printable" window fires the document print event, and the user is then prompted instantly for the options to print. I realize I'm being harsh on my own code, but that seems pretty silly. As a user - I anticipate that when I click PRINT, the page already knows WHAT I am about to print. So - let's just get one with the act of actually sending that data to the printer! Second, the old logic required too many steps from the developer. You shouldn't be troubled with added requirements of setting up the HTML file, establishing a printable format, and mucking with the page itself to product what you want.

The new solution - one simple jQuery expression which could be used ANYWHERE to provided printed output. The expression allows you to use the selector logic to select whatever you want on the page, and instantly send this to the printer.

So - How Do I Use It?

  1. You identify what on this page is going to be printable.
    Assume you want to use one specific selector to get to your content. This may be a single ID, or multiple nodes or class assignments. It's up to you. The samples provided below will identify exactly the settings we used, and allow you to dream up your own scenario.
  2. You create your own Print button, which calls the jQuery print function.
    You dont need to create an actual button - it doesn't matter to me HOW you provide a print button. For our samples below we use plain Anchor tags. All that is required is that you call a jQuery expression when you click that button. 
  3. You include the jQuery Print plugin (provided below) in your page.
    <script type="text/javascript" src="  .....  /jquery.print.js"></script> 

How Do I Get It?


You may want to place this in the same directory on your server. I will get around to putting this into the Google code site when I return from holiday, but I wanted everyone to be able to get to it right now!

Show Me How It's Done (I learn better that way too!)

Print the entire page.

CLICK TO PRINT<a href="#" onclick="$('body').print(); return false;">CLICK TO PRINT</a>

Print a specific element (by id - in this case object with the id "dnn_ContentPane"):

CLICK TO PRINT<a href="#" onclick="$('#dnn_ContentPane').print(); return false;">CLICK TO PRINT</a>

Print all the <p> tags. While in this sample, this is ugly - it does give you an idea of how you could be selective about your output.

CLICK TO PRINT: <a href="#" onclick="$('p').print(); return false;">CLICK TO PRINT</a>

Advanced Features

Three parameters can be specified for the print functionality to support anything you need to include in your printed output - head, bodyPre and bodyPost.

head - any html syntax needed to be appended to the bottom of the HEAD of your page. The head of the existing page is automatically copied into the printed output to make sure that all CSS and other inclusions are there. If further settings are necessary (like a special printable stylesheet version) place them int he text parameter.

bodyPre/bodyPost - these two parameters work the same way. If you need to add output to the TOP or the BOTTOM of the Body of your printed document, you can place them in the bodyPre or bodyPost parameters accordingly.

More Samples

Adding new styles into the head

CLICK TO PRINT: <a href="#" onclick="$('#dnn_ContentPane').print('<style> h2 {font-size: 24px; color: red;}</style>'); return false;">CLICK TO PRINT</a>

Adding content above and below our final output

CLICK TO PRINT: <a href="#" onclick="$('#dnn_ContentPane').print(null,'<hr><b>ABOVE</b><hr>','<hr>BELOW<hr>'); return false;">CLICK TO PRINT</a> 

A Final Word of Warning

One primary drawback of this functionality, while it is really fun to do, is the concept that we are copying the nodes from the existing page based on the jQuery expression, instead of just a single node. You MUST pay attention to what you are using or you could get LOTS of repeated output. This is because the selector will return EACH element in a NESTED group as a list of entities. So the 1st item will be printed (with the 2nd inside) and then the 2nd element will be printed (because its the next one in the resulting list). So you really have two choices - #1 - use a single identifier or #2 - make sure you are smart about the selector. This isnt a warning because it will break the browser, I just don't want to feel like I aided in the elimination of a very large number of trees...

If you need a sample of that problem - just use the selector as "div".

CLICK TO PRINT: <a href="#" onclick="$('div').print(); return false;">CLICK TO PRINT</a>


# WSSDA Administrator | Tuesday, May 22, 2012 4:26 PM
Brilliant! This will help solve several issues I need to tackle. Thank you!
Only registered users may post comments.

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA •

Bookmark & Share Bookmark and Share