Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Creating Page-Breaks In CFDocument Without Using CFDocumentItem In Lucee CFML 5.3.7.47

By Ben Nadel on
Tags: ColdFusion

The other day, I was experimenting with the SrcFile attribute on the CFDocument tag as a means to pre-generate the HTML source for a PDF. Normally, when generating a PDF, I would just inline the CFML code inside the CFDocument tag-body; and, I'd use the CFDocumentItem tag with type="pagebreak" to create page-breaks. Which begs the question: if I'm using an externalized HTML source file, how do I create page-breaks? It turns out, since the CFDocument tag supports some CSS, we can use the page-break-before property to generate page-breaks without the CFDocumentItem tag in Lucee CFML 5.3.7.47.

To see this in action, I've created a simple CFDocument tag instance that renders three separate pages. Note that I have a <style> tag in my document head that defines this CSS style-block:

<style type="text/css">

	div.start-on-new-page {
		page-break-before: always ;
	}

</style>

Now, I can apply the CSS class name, start-on-new-page, to any div element to force that content to start on a new page:

<cfdocument
	format="pdf"
	filename="./document.pdf"
	overwrite="true">

	<!doctype html>
	<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>
			CFDocument: Generating Page-Breaks Without CFDocumentItem
		</title>

		<!---
			Even though we aren't using CFDocumentItem[type=pagebreak], the CFDocument
			tag can generate page-breaks using the CSS property: "page-break-before".
			If we add this at the start of a "section", that section will begin on a
			new page of the PDF.
		--->
		<style type="text/css">

			div.start-on-new-page {
				page-break-before: always ;
			}

		</style>
	</head>
	<body id="pageOne">

		<h1>
			CFDocument: Generating Page-Breaks Without CFDocumentItem
		</h1>

		<ul>
			<li>
				<a href="#pageTwo">Page Two</a>
			</li>
			<li>
				<a href="#pageThree">Page Three</a>
			</li>
		</ul>

		<div id="pageTwo" class="start-on-new-page">

			<h2>
				Page Two
			</h2>

			<p>
				I am page two, woot woot!
				Continue on to <a href="#pageThree">Page Three</a>.
			</p>

		</div>

		<div id="pageThree" class="start-on-new-page">

			<h2>
				Page Three
			</h2>

			<p>
				I am page three, tee hee hee!
				Jump back up to <a href="#pageOne">the top</a>.
			</p>

		</div>

	</body>
	</html>

</cfdocument>

As you can see, page Two and page Three are each contained within a div.start-on-new-page element. And, when we generate this PDF, we get the following experience:

A CFDocument PDF generated with page-breaks without CFDocumentItem in Lucee CFML.

Easy peasy! Thanks to the page-break-before CSS property, each section in this CFDocument PDF starts on a new page. This will make it possible for me to pre-generate HTML files with granular control even without the CFDocumentItem tag in Lucee CFML 5.3.7.47.



Reader Comments

What has two thumbs and hopes you leave a comment? This Guy! (Ben Nadel).

Post A Comment

You — Get Out Of My Dreams, Get Into My Blog
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.