Page History

Content layer

id	1907079727

Content column

id	1907079738

Content block

id	1907079726

On this page:

Table of Contents

maxLevel	4

Content block

id	1907079737

To make changes to the footer or header of exported documents, you will need to modify the following files:

For the header - <template folder>/common/header.html
For the footer - <template folder>/common/footer.html

You can add a logo to the header or footer in one of the following ways:

Encode the logo image as the Base64 encoded string and use it as the value of the img src attribute.
Add a URL to the remote image as the value of the img src attribute.
Note
The URL must be absolute, relative URLs do not work.
The URL must be accessible from the server where Web Application Platform is deployed.

Example of adding a logo to the header as a Base64 encoded string

Let’s say you want to use a logo in the header of the exported PDF file pages.

To add a logo to the header as a Base64 encoded string

Encode the image as a Base64 string. You can use an online converter or use your own code/tools to make the conversion.
Open the <template folder>/common/header.html file.
Find the header tag.
Add the img tag with <img src="{data:image/<image type>;base64,<Image as a Base64 encoded string> }" alt="<alt text>">

Use other HTML tags and CSS styling information to display the logo image the way you want. Your code may look like the one below if you use a PNG image and want some padding around the image:

Code example when using the PNG image type and some padding around the image

The figure below shows an example of the exported document with the logo in the header.

An example of the exported document with the logo in the header.

Example of adding a logo to the footer using an absolute URL to the image

Let’s say you want to use a logo in the footer of the exported PDF file pages. In this example, we will use an absolute URL as the image source.

To add a logo to the footer using an absolute URL to the image

Open the <template folder>/common/footer.html file.
Find the footer tag.
Add the img tag with <img src"http(s)://path_to_image" alt="<alt text>" >

Use other HTML tags and CSS styling information to display the image the way you want. Your code may look like this (the CSS is inline for simplicity):

Code Block

title	Code example

<footer class="footer"
      xmlns:th="http://www.w3.org/1999/xhtml">
   
<div style="padding: 0 0 5px 5px; float: left; height: 25px;">
      <img src="https://www.3ds.com/assets/3ds-navigation/3DS_corporate-logo_blue.svg" 
           alt="Logo" style="width: auto;
           height:100%;
           object-fit: cover;">
   </div>   
   <div th:text="|${pagination.currentPageNumber}/${pagination.documentPagesSize}|" class="footer-text">
   </div>
</footer>

The figure below shows an example of the exported document with the logo in the footer.

Page tree

Versions Compared

Old Version 1

New Version 2

Key

Example of adding a logo to the header as a Base64 encoded string

An example of the exported document with the logo in the header.

Example of adding a logo to the footer using an absolute URL to the image

An example of the exported document with the logo in the footer.