Click here to Skip to main content
Click here to Skip to main content
Articles » Languages » XML » XML/XSLT » Downloads
 
Add your own
alternative version
Go to top

HTML reporting with page break, using XSL and CSS

, 16 Mar 2008
One possible way to build an HTML report that has a dynamic number of pages.
xsl_html_pagebreak.zip
image_header.png
xsl_html_pagebreak_a.pdf
xsl_html_pagebreak_b.pdf
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:js="urn:extra-functions">
	<xsl:output method="html" indent="yes"/>
    <xsl:template match="Data">
			<html>
				<head>
					<title>Invoice</title>
					<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
					<style type="text/css">
						table { empty-cells: show; border-spacing: 0px; margin: 0px; padding: 0px;}
						.pagebreak {page-break-after: always;}
						.tableReportHeader{border-top: solid DarkBlue 1px; border-left: solid DarkBlue 1px; border-right: solid DarkBlue 1px; width: 645px;}
						.tabledetails{border-left: solid DarkBlue 1px; border-right: solid DarkBlue 1px;  width: 645px; }
						.tableReportFooter{bottom: 2px;border-bottom: solid DarkBlue 1px; border-left: solid DarkBlue 1px; border-right: solid DarkBlue 1px;  width: 645px;}
						.imglogo{border-style: none; vertical-align: top; border-color: White;}
						td{vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 9pt}
						.tdmargin{width:10px;}

						.documentheader{font-family:Arial; font-size:9pt; color:DarkBlue; font-weight:bold;}
						th{font-family:Arial; font-size:8pt; color:white; background-color: darkblue; text-align:center;border: solid 1px darkblue;}
						.tdorderHeader{border: solid 1px darkblue;}
						.blueline{border-bottom: solid DarkBlue 1px;}
						.documenttotal{font-family:Arial; font-size:9pt; color:DarkBlue; font-weight:bold;border-bottom: solid DarkBlue 1px;}
						.tdtotalmargin{width:450px;}
					</style>
				</head>
				
				
				<body>
					<xsl:copy-of select="$ReportHeader"/>

					<xsl:call-template name="Filler">
						<xsl:with-param name="fillercount" select="1" />
					</xsl:call-template>

					<xsl:copy-of select="$OrderRecipient"/>

					<xsl:call-template name="Filler">
						<xsl:with-param name="fillercount" select="1" />
					</xsl:call-template>

					<xsl:copy-of select="$OrderHeader"/>

					<xsl:call-template name="Filler">
						<xsl:with-param name="fillercount" select="1" />
					</xsl:call-template>

					<xsl:copy-of select="$OrderRowsHeader"/>

					<xsl:for-each select="Order/OrderRows/OrderRow">

						<table class="tabledetails" cellspacing="0" style="table-layout:fixed">
							<tr>
								<td class="tdmargin" />
								<td style="width:70px" align="right" class="blueline">
									<xsl:value-of select="ProductID" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td class="blueline" style="width:220px" >
									<xsl:value-of select="ProductName" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td style="width:50px" align="right" class="blueline">
									<xsl:value-of select="Quantity" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td style="width:50px" align="right" class="blueline">
									<xsl:value-of select="concat('$ ', UnitPrice)" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td style="width:50px" align="right" class="blueline">
									<xsl:value-of select="concat(Discount, ' %')" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td style="width:100px" align="right" class="blueline">
									<xsl:value-of select="concat('$ ', ExtendedPrice)" />
									<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
								</td>
								<td class="tdmargin" />
							</tr>
						</table>
						<xsl:if test="(position() mod 40) = 0 ">
							<!--40 rows per page-->
							<xsl:call-template name="Filler">
								<xsl:with-param name="fillercount" select="1" />
							</xsl:call-template>

							<xsl:copy-of select="$ReportFooter" />

							<br class="pagebreak" />
							
							<xsl:copy-of select="$ReportHeader" />

							<xsl:call-template name="Filler">
								<xsl:with-param name="fillercount" select="1" />
							</xsl:call-template>

							<xsl:copy-of select="$OrderRecipient"/>

							<xsl:call-template name="Filler">
								<xsl:with-param name="fillercount" select="1" />
							</xsl:call-template>

							<xsl:copy-of select="$OrderHeader"/>

							<xsl:call-template name="Filler">
								<xsl:with-param name="fillercount" select="1" />
							</xsl:call-template>

							<xsl:copy-of select="$OrderRowsHeader"/>

						</xsl:if>
					</xsl:for-each>



					<!--Filler -->
					<xsl:choose>
						<!-- case of only one page-->
						<xsl:when test="count(Order/OrderRows/OrderRow) &lt;= 40">
							<xsl:call-template name="Filler">
								<xsl:with-param name="fillercount" select="40 - (count(Order/OrderRows/OrderRow))"/>
							</xsl:call-template>
						</xsl:when>
						<!-- case of more than one page-->
						<xsl:otherwise>
							<xsl:call-template name="Filler">
								<!--(Rows per page = 40) -  (Rows in current page) - (Total section rows = 1 ) + (Filler Row = 1)-->
								<xsl:with-param name="fillercount" select="40 - ( ( count(Order/OrderRows/OrderRow)-40 ) mod 40 ) - 3 + 1"/>
							</xsl:call-template>
						</xsl:otherwise>
					</xsl:choose>
					<!--End Filler -->

					<xsl:copy-of select="$OrderTotals"/>


					<xsl:copy-of select="$ReportFooter"/>

				</body>
			</html>


		</xsl:template>


	<!-- variable ReportHeader-->
	<xsl:variable name="ReportHeader">
		<table class="tableReportHeader" cellspacing="0">
			<tr>
				<td>
					<img class="imglogo" src="image_header.png" />
				</td>
				<td>
					<h3 style="color:darkblue; font-family: Arial;">INVOICE</h3>
				</td>
			</tr>
		</table>
	</xsl:variable>

	<!-- variable OrderRecipient-->
	<xsl:variable name="OrderRecipient">
		<table class="tabledetails" cellspacing="0">
			<tr>
				<td class="tdmargin" />
				<td class="documentheader"  align="right">
					Ship To:
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Order/ShipName" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="documentheader" align="right">
					Bill To:
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Customer/CompanyName" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>

			<tr>
				<td class="tdmargin" />
				<td>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Order/ShipAddress" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Customer/Address" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>

			<tr>
				<td class="tdmargin" />
				<td>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Order/ShipCity" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
					<xsl:value-of select="/Data/Order/ShipRegion" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
					<xsl:value-of select="/Data/Order/ShipPostalCode" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td>
					<xsl:value-of select="/Data/Customer/City" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
					<xsl:value-of select="/Data/Customer/Region" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
					<xsl:value-of select="/Data/Customer/PostalCode" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>
		</table>
	</xsl:variable>

	<!-- variable OrderHeader-->
	<xsl:variable name="OrderHeader">
		<table class="tabledetails" cellspacing="0" >
			<tr>
				<td class="tdmargin" />
				<th>
					Order ID:
				</th>
				<th>
					Customer ID:
				</th>
				<th>
					Salesperson:
				</th>
				<th>
					Order Date:
				</th>
				<th>
					Required Date:
				</th>
				<th>
					Shipped Date:
				</th>
				<th>
					Ship Via:
				</th>
				<td class="tdmargin" />
			</tr>
			<tr>
				<td class="tdmargin" />
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/OrderID" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/CustomerID" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/EmployeeName" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/OrderDate"/>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/RequiredDate"/>
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdorderHeader">
					<xsl:value-of select="/Data/Order/ShipViaName" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>
		</table>
	</xsl:variable>

	<!-- variable ReportFooter-->
	<xsl:variable name="ReportFooter">
		<table class="tableReportFooter">
			<tr>
				<td style="width:20px;"></td>
				<td>
					<table>
						<tr>
							<td style="font-size: 5pt; text-align: justify;border-top: solid DarkBlue 1px;">
								One Portals Way, Twin Points WA  98156 Phone: 1-206-555-1417   Fax: 1-206-555-5938
							</td>
						</tr>
					</table>
				</td>
				<td style="width:20px;"></td>
			</tr>
		</table>
	</xsl:variable>

	<!-- Template Filler-->
	<xsl:template name="Filler">
		<xsl:param name="fillercount" select="1"/>
		<xsl:if test="$fillercount > 0">
			<table class="tabledetails">
				<tr>
					<td>
						<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
					</td>
				</tr>
			</table>
			<xsl:call-template name="Filler">
				<xsl:with-param name="fillercount" select="$fillercount - 1"/>
			</xsl:call-template>
		</xsl:if>
	</xsl:template>

	<!--variable OrderRowsHeader-->
	<xsl:variable name="OrderRowsHeader">
		<table class="tabledetails" cellspacing="0" style="table-layout:fixed">
			<tr>
				<td class="tdmargin" />
				<th style="width:70px">
					Product ID:
				</th>
				<th style="width:220px">
					Product Name:
				</th>
				<th style="width:50px">
					Quantity:
				</th>
				<th style="width:60px">
					Unit Price:
				</th>
				<th style="width:50px">
					Discount:
				</th>
				<th style="width:100px">
					Extended Price:
				</th>
				<td class="tdmargin" />
			</tr>
		</table>
	</xsl:variable>

	<!--variable OrderTotals-->
	<xsl:variable name="OrderTotals">
		<table class="tabledetails" cellspacing="0" style="table-layout:fixed">
			<tr>
				<td class="tdtotalmargin" />
				<td class="documenttotal" align="right">
					Subtotal:
				</td>
				<td class="blueline" align="right">
					<xsl:value-of select="/Data/Order/SubTotal" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>
			<tr>
				<td class="tdtotalmargin" />
				<td class="documenttotal" align="right">
					Freight:
				</td>
				<td class="blueline" align="right">
					<xsl:value-of select="/Data/Order/Freight" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>
			<tr>
				<td class="tdtotalmargin" />
				<td class="documenttotal" align="right">
					Total:
				</td>
				<td class="blueline"  align="right">
					<xsl:value-of select="/Data/Order/Total" />
					<xsl:value-of select="translate(' ', ' ', '&#160;')"/>
				</td>
				<td class="tdmargin" />
			</tr>
		</table>
	</xsl:variable>

</xsl:stylesheet>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Martin Garcia
Software Developer (Senior) BrisConnections Operations Pty Ltd
Australia Australia
Senior Software Developer on Microsoft and Unix-like environments. Senior Data Analyst and Database Developer in particular on the MSSQL and MySQL platforms

| Advertise | Privacy | Mobile
Web02 | 2.8.140921.1 | Last Updated 16 Mar 2008
Article Copyright 2008 by Martin Garcia
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid