I like NetSuite’s Advanced PDF/HTML templating system with the FreeMarker syntax. However, there are a couple of issues I’ve run into and one just recently:
How can you force printing on two or more pages?
One example I’ve been working on is the ability to print “how to pay” information on the back of our invoices that are issued to our customers.
As our invoices can span a few lines we have been squeezing that information down in the footer of the page. This makes for small font and errors from the customer when entering payment details. I mean, you’ve got a lot more space on the back than you do in the footer! It would be so much more convenient if this information were to be printed on the back of the invoice, but to do this it would mean getting the template to do a page break .
After asking for this feature request to NetSuite some time ago, I came across an interesting, and simple, CSS technique that actually works!
The solution?
- Just measure the dimensions of the paper you would like to print. Or obtain standard paper dimensions from the web.
-
Enter this information into a CSS class in the
<style>area within your PDF/HTML template. - Reference this class whenever you want to do a page break.
Here’s a simplified template demonstrating this concept:
<?xml version="1.0"?>
<!DOCTYPE pdf PUBLIC "-//big.faceless.org//report" "report-1.1.dtd">
<pdf>
<head>
<macrolist>
<macro id="nlfooter">
<table>
<tr>
<td>This is the footer. I've chosen to span this over each page.</td>
</tr>
</table>
</macro>
</macrolist>
<style>
/* Insert the physical dimensions of the size of the paper you print.*/
/* Width = page width; Min-height = page height; */
/* (You may/may not need to have `margin-right:1.5cm`. I found the contents spilled off the page without it.)*/
.page { margin-right: 1.5cm; width: 21cm; min-height: 29.7cm; }
</style>
</head>
<body footer="nlfooter" footer-height="15%">
<div class="page">
<h1>Welcome to the first page!</h1>
<p>Place all your first page information here. For example, you may want to put your company logo, the invoice date, number, contact address of the customer, and then you'll want to loop through all the items in the invoice in a nice neat table.</p>
<p><strong>Notice how the right-margin is a little funny?</strong></p>
<p>You may need to increase the `margin-right` value on the `page` class attribute to make this margin look nicer on the page. Play with it.</p>
</div>
<div class="page">
<h1>Welcome to page 2!</h1>
<p>You should now see this on the second page.</p>
<p>This is where you can place additional information on whatever else is important, i.e. how to pay, etc.</p>
</div>
</body>
</pdf>
As you can see from the comments, all you need do is enter the dimensions of the size of the paper into the
.page
attribute and then reference that class whenever you want to apply a page break.
How did that demo turn out?
Nice!
