dojo/dijit and Printing

Question

I want to be able to provide a button to my users to just print a particular portion of my dojo/dijit application. There seems to be a general lack of documentation and examples when it comes to printing.

For example, I have a specific dijit.layout.ContentPane that contains the content that I would like to print, but I wouldn't want to print the rest of the document. I have seen some pure JavaScript examples on the web where the node.innerHTML is read into a "hidden" iframe and then printed from there. I suspect that would work, but I was wondering if there was a more dojo centric approach to printing.

Any thoughts?

Answer 1

One solution would be to create a print-only stylesheet while the first rule hiding everything by default:

body {
    display: none;
}

Then, a second CSS rule, also in your print-only stylesheet, displays only the Dojo content pane:

#contentPaneId {
    display: block;
}

The Dojo ContentPane ID needs to match what you use for #contentPaneId in the CSS.

Finally, you can instruct browsers that it's a print-only CSS file using media="print" in your link tag:

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

Answer 2

I have decided to go down the path of reading into <iframe> and printing from there, but because I am using a rendered dojox.gfx surface, a direct read from the target ContentPane to the invisible iframe did not work correctly in some browsers. So what I do is set the "src" of the iframe to a page which re-renders the diagram and then prints itself out when it is finished. In the main document it looks something like this:

<iframe id="printIFrame4" src="#" style="width: 0px; height:0px; 
  border: none; background: transparent"></iframe>
<button dojoType="dijit.form.Button" style="margin-top: -3px;" id="buttonPrintMap4">
  Print...
  <script type="dojo/method" event="onClick" args="event">
    dojo.byId("printIFrame4").src = "logmap/docMap.php?id=4";
  </script>
</button>

And then the page does the necessary dojo stuff to redrew the diagram and then once it is loaded it does a:

this.focus();
this.print();

Which then follows through with the printing.