PBDR.COM

About   -   Contact   -   Purchase   -   Search   -   What's New

 
 
Javascript Printing Client Side Reports using IFrames
I recently needed to develop some simple online forms to be used for printing where I had no backend server to perform any processing, so the only technology was the browser client side scripting (html, css and javascript). I coded up the on screen form and built some validation routines and that worked really well.

However the forms still had to be printed and they had to match closely to existing pre-printed stationery forms so I could not just print the on screen form and using css and media types was not going to work well enough. I came up with the idea of having a hidden IFrame which had a separate set of html/css. When the user completed the online form and clicked Print I would validate the form and once valid would copy the data from the form into the IFrame html. Again this worked well, however I had a problem that every now and again when I printed the IFrame I would get the online form printed instead.

The code to print the IFrame was:
reportFrame.focus();
reportFrame.print();

This set the focus first to the hidden IFrame before requesting it to be printed, however it seemed like sometimes the focus was not set onto the IFrame before the Print was Issued. I changed the code to make use of the javascript delayed command feature of setTimeout to allow the browser a little time to set the focus before the print was called and the problem was solved:

reportFrame.focus();
setTimeout('reportFrame.print()',20);
 

Top of Page

Legal Notice

Ken Howe 2011