Scale Large Image for Printing

Internet Explorer's scale to fit feature can be used to scale overlarge output to fit the page. However, this scaling calculation only occurs in the horizontal direction.

It is also possible to scale the print. For this to work either requires calculating the scale in advance or determining it at run time which means being able to calculate the printed width of elements.

Scaling

This sample illustrates using a print scale of 100% and then using css to cause the scaling of the image. All that is then required is to know whether horizontal or vertical scaling is required which is simply a question of ratios of the paper size to image size regardless of the uints of either. The image sizes are known, ScriptX can be queried for the size of the paper in use. Depending on the scale direction, css is used to scale the image to 100% of the available dimension:

var style = scaleImageByWidth(image) ? "width: 100%;" : "height: 100%;";
var el = "<img src='" + imageUrl(image) + "' style='" + style + " margin: 0; padding: 0; border: none'>";

Printing

Though media dependent css can be used to restrict printing to only required elements there can be artefacts from frameworks that are being used such as bootstrap which disturb the layout. To avoid this, there are two choices:

• Pour content into a hidden frame and print/preview the frame.
• Construct the content for an html document as a string and then background print that document.

This sample illustrates both techniques.