Multi-page Document Printing on the Web using a Thin Client Approach
One of the most sought after features for developers using our products is that of printing multi-page document images through the web using a thin client/AJAX approach. There are a set of fundamental problems with doing this:
- Printing can only be done using the browser's print dialog, as there is no direct way to interface with the client's printer through a web page.
- Each browser likes to print a little bit differently than the next. (margins, size, etc)
- Print options are not accessible via JavaScript. (window.print() is all that's allowed)
- Printing from a frame or iframe separately doesn't seem to be possible, so another popup is necessary, unless the parent page is occupied by the content to be printed.
- The entire page range to be printed must be resampled on the server side so it will fit in the available space. Some browsers can fix this with automatic image resizing, but in general the documents become illegible without a scale to gray resample.
- The image(s) can only be printed at 96 DPI because browsers only print what's on the screen, and screen resolution is 96DPI.
- The entire page range must be downloaded by the client before it can be printed.
- For every page printed, there will need to be a page break or equivalent spacing, because the browser will just print the next page on whatever space it has left on the current page.
As you can see, there are a good deal of hurdles to deal with for something that seems so simple. While taking all of this into account, it is possible to write a few web forms that could tackle this. The one hurdle that I didn't really want to tackle was the page break spacing between images, as it seemed impossible to make this work with most browsers. We recently had a customer contact us who was dealing with this issue by using the style attribute "PAGE-BREAK-AFTER: always". This was the last piece of the puzzle that I needed (although it doesn't seem to work in Safari).
I created a user control that creates an HtmlTable on the fly, placing a series of image tags using this style attribute, and setting the src attribute referring to another web form that resamples each image so that it fits on letter paper size (8.5in x11in @ 96 DPI). This works great in IE 6.0, FireFox 1.5, and Opera 9. This almost works in Safari, and I'll post an update if I find a way to get it to work for sure.
Until then, here are the links to the code: (you will need at least DotImage Photo Pro to get this to work "out of the box")
- VS 2003 To use this zip, you will need to create a new Web Application, reference the necessary Atalasoft dll's, and add the files in the zip to your new app.
- VS 2005 This is a file system based web application with dll.refresh files pointing to the install location of DotImage. If you do not have DotImage installed at that location, you will need to remove and re-add your references to the Atalasoft dll's.
*edit: Added VS 2005 version, and general instructions
