Creating a PDF from Website Content

I recently had a requirement to convert website content to a PDF file. First I thought it was going to be a lot of coding. I would have to make every page component look the way it should on a printable document and generate a nice PDF file from the whole page.

I did not want to spend too much time. There must be an easier way. How else could the Save as PDF button in Safari do such a good job printing a page without knowing anything about my Web application?

Searching for a shortcut I came across the Flying Saucer Project:

Flying Saucer is an XML/CSS renderer, which means it takes XML files as input, applies formatting and styling using CSS, and generates a rendered representation of that XML as output. The output may go to a PDF file. -- Flying Saucer User's Guide

Very impressive work! Especially considering how much it can accomplish with very little code and a print style sheet.

Using the Flying Saucer library in a servlet to access the website anonymously worked OK. But when I tried authenticated access Magnolia CMS resources, everything stopped working. Fortunately, this was easily resolved with the callback class that the Flying Saucer Project offers. I must confess that I overlooked it first. The callback class not only allows you to decide how to access the website resources but also lets you decide how to render the images and styles.

The rest of the work such as which elements to display, where to display them, the page size and page breaks are specified in the style sheet using the W3C Paged Media syntax.

See linked document on how would the document look like by printing the About section of the demo project with all pages in the same PDF document.

For this example, I used the standard print.css that comes with the demo-project theme-pop, adding just a style for the images so it does not make a page break in the middle of the image:

img { page-break-inside: avoid; }

Many thanks to the Flying Saucer Project developers for providing this amazing utility!

Adding Flickr images to Magnolia CMS

This is a step-by-step guide on how to create your custom DAM and plug it into Magnolia CMS. Will allow you to add images from external services like Flickr, as well as adding images from other servers using their url (It comes with a forge module!)

This is a sample handle for external image/video urls, very basic as it does not add the imaging support for now.

* Requirements - Standard Templating Kit Module

1. The Asset

We need to create our own Asset class that will implement the interface Asset

If we want to have exact same behavior as in STK/ETK we will need to find a way to store 'meta data' (caption, description) of our assets, we could use the data module for that matter.

In this sample we wont store any metadata for the images, nor use the imaging support.

That leaves us with just one method to implement 'getLink' and this will be the value stored when we open the dialog to select an image.

public String getLink() throws DAMException {
return link;
}

Creation of link is on the class constructor, as easy as this

link = nodeData.getString();



2. The handler.

Should extend class AbstractHandler . We will extend from AbstractHandler that has the methods to read the configuration, that leaves us with two methods to implement as needed: getAsset and getAssetByKey. In this case we implement getAsset to return an instance of our Asset.

final String name = getNodeDataName(node, nodeDataPrefix);

Important thing to note here is that we need to get the name of the nodeData that has the url of our image. When you set an image using the dam controls, you name your node as i.e. 'myimage' and on saving you will get a nodeData with the name you gave plus the name of the dam control used. To make it simpler a call to the method getNodeDataName will give you the real name with which your node has been saved. In this sample it will contain the exact url of our image, no need of further processing.

final NodeData nodeData = node.getNodeData(name);

This line above gets the node data, now with the right name.

return new UrlAsset(nodeData);

Here is where we return our asset.

3. The controls (configuration).

Need to add the configuration for this external dam. For that we create a new node under our site configuration. There we put the handler we are going to use and the control/s in which we will store the image information. See image:




And to finish this post there is a module in Magnolia forge magnolia-module-urldam with the code to add an external dam handler.