Developer Articles

Displaying Coldfusion CFQuerys as embedded Excel spreadsheets

Here is a good bit of code to display Coldfusion CFQuerys as an embedded Excel spreadsheet right in the user's browser.

<!--- Add these lines to top of the page --->
<cfcontent type="application/x-msexcel; charset=utf-16" reset="No">
<cfheader name="Content-Type" value="xls">
<cfheader name="Content-Disposition" value="attachment; filename=test.xls">
<cfheader name="Expires" value="0">


<!--- Next create your query --->
<cfquery username="username" password="password" datasource="DS" NAME="MyQuery">


<!--- Now just output a table...including column names--->
<cfset szColumns = MyQuery.columnList>
<table border="1" cellpadding="1" cellspacing="2"><tr>
<cfloop index="szColName" list=#szColumns#>
<cfoutput>
<th>#szColName#</th>
</cfoutput>
</cfloop>
</tr>


<CFLOOP QUERY="MyQuery">
<tr>
<CFLOOP INDEX="X" LIST="#MyQuery.ColumnList#" DELIMITERS=",">
<CFSET formatted = Replace(Evaluate(#X#), ",", "", "ALL")>
<cfoutput><td>#formatted#</td></cfoutput>
</CFLOOP>
</tr>
</CFLOOP>
</table>


And voila! The browser should now contain an embedded Excel document, with Excel toolbars and everything. The user can now save the document right to their computer as an Excel document! Of coarse this code only works if the user has Excel (or the Excel viewer) on their computer, so this sample is best for Web Applications where all the users do have Excel. But often, as in Web Apps you know that your client has Excel, and wants to see database data in an Excel document.

Anyway, I'd thought I'd share this code with you because all of the sample code I found while researching this is just plain wrong! And doesn't work. This code DOES work, so feel free to use it as you see fit.

Pack up your Graphics for increased download speed (CSS sprites)

Did you know that it takes longer to download two 10k images than one 20k image? Yup it does! In fact, each object (like an image) takes at least 200 ms to download on top of however long it takes to download the object given the user's download speed. This is because each http request adds about .2 secs to total download time, and each image file adds one http request. So the minimum time to download ten image files is 2 secs.

How can we use this to decrease the time it takes to download a page?

Well, suppose you have CSS rollover buttons on the page...each button state with it's own graphic. Instead of having one image file for each state, put all the images into ONE file and use the CSS background-position property as an offset into that file.

Here is an image file with two state images (one for the normal state, one for hover).

Sample Button Sprite

Now each state image is 25px high. So for the normal state CSS set
background-position: 0px 0px; //No offset since the normal state image is at the top.


For the hover state image set the :hover CSS to
background-position: 0px -25px; //Offset to the hover image.


Not only will using this technique speed up download times, but since both state images are now in one image file there won't be any image "flicker" as often occurs when using CSS rollovers :)