dojo/dijit and Printing
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 w开发者_Go百科eb 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?
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.
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"/>
精彩评论