Introduction

This server side component receives an HTML string and returns an image file that can be a png, gif, jpeg or bmp. Virtually any content can be printed, because of the ability to load javascript, flash and css files from their original location.

One of the possible uses is to enable printing selected parts of your website, in this case the HTML string can be obtained from the running web page, using javascript to get the current html contents of a container such as a DIV and send it to a server side aspx. This is the use case we included as example in our demo.

Check out a running demo

We also included a javascript library with helper functions that make it easy to generate the proper html string.

How to install it

The project is a Visual Studio 2008 solution and should run straight from your development environment.
If you need to install this service on a IIS server, you'll only need to copy the website (HTMLShot directory) to a virtual directory (make it an application)

Enable your website to generate printouts of selected html content

This is the case we provided in the example, you'll need to add the following javascript code to your web page, let's say you have a <DIV id='myDiv'> that you want to print

In the <head> section add this line (replace the URL for the actual URL where you installed HTMLShot)

<script src="Scripts/HelpersScripts.js" type="text/javascript"></script>

You have to send the string to the server page somehow and creating a form with a hidden text field is one alternative:

 <form id="form" method="post" action="ServerScripts/HTMLShot.aspx" >
 <input id="htmlStringInput" name="htmlStringValue" type="hidden" value=""/>
 <input type="submit" value="Generate HTMLshot"/> 
</form>

Finally you have to take the contents of myDiv and process them with getHtmlString helper function before assigning it to the hidden text field.

<script>
var  myDivContentString = document.getElementById('myDiv').outerHTML;
document.getElementById('htmlStringInput').value = getHtmlString(myDivContentString);
</script>

About

Authors: Nicolas Lareu | Juan Sagasti

atk_logo.png
www.australtek.com

AustralTek is a US based company dedicated to developing industry solutions in the areas of Electrical Engineering, Automation and Industrial IT.
We utilize state of the art technology to produce tools that help optimizing the different production areas in a plant.
We are specialists in technological upgrades and in the integration of existing systems with superseded platforms, thus obtaining more accurate data and homogenizing plant information flow.

Last edited Apr 23, 2010 at 11:27 PM by jsagasti, version 15