Total Pageviews

Tuesday, December 11, 2012

Generating a title page in Confluence PDF export

Well, in a previous posting I already mentioned the possibility to generate a great looking PDF export title page for a wiki page created in Confluence Wiki.
Unfortunately the article mentioned in the posting was written in german. So here is - in short - a manual in english to get great looking PDF exports.
The steps described here are tested and verified in Confluence 4.1.9. I expect it to work with newer Confluence versions but there is no guarantee.

Step 1: Define the user macro in Confluence that defines the dynamic content of the title page



The code in the template textfield:
 
 ## Body processing: Selected body processing option
 ## Output: Selected output option  
 ##  
 ## Developed by:   
 ## Date created:   
 ## Installed by:  
 ## @param Titel:required=true|type=string|desc=Dokumenttitel  
 ## @param Thema:required=true|type=string|desc=Unterthema des Dokuments  
 ## @param Autor:required=true|type=string|desc=Dokument Autor  
 ## @param Datum:required=true|type=string|desc=Dokument Datum  
 ## @param Version:required=true|type=string|desc=Dokument Version  
 <style type="text/css">  
 .KonzeptTitel:before { content: '$paramTitel'; }  
 .KonzeptThema:before { content: '$paramThema'; }  
 .KonzeptAutor:after { content: '$paramAutor'; }  
 .KonzeptDatum:after { content: '$paramDatum'; }  
 .KonzeptVersion:after { content: '$paramVersion'; }  
 </style>  

Step 2: Declare a custom PDF Layout for exporting the title page

You can change the PDF Layout either globally or local for each space. In this example the space version is used.
In Confluence go to

Space - Browse - Space Admin - PDF Layout

and edit the section

PDF space export title page.

Enter the following content:

 <div style="text-align:center; padding:0px; padding-top: 50px;">  
 <img src="/download/attachments/3407974/Logo.jpg" width="70%" height="70%"/>  
 </div>  
 <div style="padding:0px">  
  <div class="KonzeptTitel pdfTitelblattTitel"></div>  
  <div class="KonzeptThema pdfTitelblattThema"></div>  
  <span class="pdfTitelblattText" style="display:inline-block; width:30mm; margin-bottom:2mm; padding-left: 200px;"><b>Autor:</b></span>  
  <span class="KonzeptAutor pdfTitelblattText"></span><br/>  
  <span class="pdfTitelblattText" style="display:inline-block; width:30mm; margin-bottom:2mm; padding-left: 200px"><b>Datum:</b></span>  
  <span class="KonzeptDatum pdfTitelblattText"></span><br/>  
  <span class="pdfTitelblattText" style="display:inline-block; width:30mm; margin-bottom:2mm; padding-left: 200px"><b>Version:</b></span>  
  <span class="KonzeptVersion pdfTitelblattText"></span><br/>  
  <br/>  
 </div>  

The file Logo.jpg is an image attachment somwewhere in the space. This image appears on top of the title page in the PDF export. You can get the url of the attached image when you go to the page where the image is attached and click on Tools - Attachments and then on the image you would like to see on the title page.

Step 3: Declare a custom PDF stylesheet for the PDF layout

The above layout references CSS stylesheets you must declare.
Still in the Space Admin section click on PDF Stylesheet and Edit PDF Export Stylesheet
Enter the following code:
 
@page  
 {  
 @top-right  
   {  
    content: page:title;  
   }  
 @bottom-left  
   {  
     content: element(Datetime);  
     font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
     font-size: 8pt;  
   }  
 @bottom-right  
   {  
     content: "Page " counter(page) " of " counter(pages) ;  
     font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
     font-size: 8pt;  
   }  
 @bottom-center  
   {  
     content: "Copyright © 2012, My Company LTD";  
     font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
     font-size: 8pt;  
     color:#595959;  
   }  
 }  
 .KonzeptTitel {   
 font-size: 36px !important;  
 text-align: center;  
 padding-top: 150px !important;  
 }  
 .KonzeptThema {   
 font-size: 24px !important;  
 text-align: center;  
 padding-top: 100px !important;  
 padding-bottom: 200px !important;  
 }  
 .KonzeptAutor {   
 font-size: 16px !important;  
 text-align: left;  
 }  
 .KonzeptDatum {   
 font-size: 16px !important;  
 text-align: left;  
 }  
 .KonzeptVersion {   
 font-size: 16px !important;  
 text-align: left;  
 }  
 .pdfTitelblattText {   
 font-size: 16px !important;  
 text-align: left;  
 }  
 .noprint  
 {  
 display: none ;  
 }  
 div.pagebreak  
 {  
   page-break-before:always;  
 }  
 .pagetitle h1 { display: none; }  

This stylesheet declares the CSS definition that was already mentioned in step 1 and 2. Furthermore it adds page numbering at the bottom (right) of the page and adds a footer at the bottom (center).
Customizing PDF exports is described in detail on this official Confluence documentation.

Step 4: Use the macro in a wiki page

The last thing to do is to insert the macro in a confluence page. Choose the macro with name konzept from the macro browser and fill in the required fields.
The following screenshot shows an example:

That's it.
One important thing to mention: You will not get the title page in your export using the PDF export from the page tools. It only works when using the PDF export method of the space.
Click on Advanced - PDF Export and select the page you would like to export. The resulting export should look something like this: