PDF Export with both title and image in header possible?

Caroline Busse March 29, 2018

Hi,

I added an image to the header of my PDF Export in Confluence via the HTML PDF Layout.

Everything worked.

Additionally I added the page title as dynamic title of my header via CSS in the PDF Stylesheet.

And now only the title is visible.

 

Note: I placed the title on the left side of my header and the image on the right.

 

How can I have both displayed in my header?

My idea was to maybe place the image in the Stylesheet too. But I couldn't find a suiting code therefore.

 

Thanks. :)

3 answers

0 votes
thomas_ohrbom
Contributor
September 17, 2019

Hi, I'm late to the party, but I had the same issue and have found a solution. The following works on Confluence Cloud for single page "Export to pdf".

Go to Settings | PDF Stylesheet and add the following:

 

code.png

Cheers!

PS! Apologies for posting the solution as an image. I am not allowed to post the code on this forum as it states the code is illegal!

Sonia Michot Roberto
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 4, 2024

Hi @thomas_ohrbom

Many thanks for your post :)

Nonetheless, when the heading 1 (or heading 2) is displayed on the header, it disappears from the original place. I found the same issue at:

https://community.atlassian.com/t5/Confluence-questions/PDF-export-ADD-page-title-to-header-footer/qaq-p/792218

Do you know if there is a way to solve this issue?

BR

0 votes
Nils Bier _K15t_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 16, 2018

Hi Caroline,

As an alternative to the default PDF Exporter you could also have a look at our Scroll PDF Exporter.

Scroll PDF Exporter comes with a graphical template designer, allowing you to fully control the output without any CSS or HTML knowledge.

Additionally it supports placeholders for certain elements (e.g. page title) that can be used in the header or footer of the export.

In your case you could use the "Chapter Heading" placeholder in order to dynamically display the heading of the exported page.

Scroll PDF Exporter - as all Marketplace apps - can be tested for free using a 30 day trial license from the Atlassian Marketplace. Please feel free to have a closer look, or reach out to us via support@k15t.com, if you have any further questions, or want to set up a demo to discuss your requirements.

Cheers,
Nils

Caroline Busse April 17, 2018

Thanks, but I'd prefer a free solution. :)

Like Alex Thiau likes this
0 votes
thais
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 3, 2018

Hi, Caroline,

Can you please share the codes you used so we can test on our test instance?

Thanks!

Caroline Busse April 6, 2018

Hi Thais,

 

this is the HTML Code I placed in the header space of the PDF Layout (for the image):

<div style="margin-top: 10.0mm; text-align:right">
<img src="https://insight.eqs.com/download/attachments/89305057/EQS_GROUP_dark_RGB.jpg?api=v2" height ="50px" width="80px" />
</div>

 

and here's the CSS code i put in the PDF Stylesheet;

@page
{
@top-left
{
content: element(runningheader);
}
@bottom-right
{
content: counter(page) " / " counter(pages);
}
}

.pagetitle h1 {
position: running(runningheader);
font-size: 10pt;
}

 

Thanks. :)

Caroline Busse April 12, 2018

Hi, do you have an idea? :)

thais
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 12, 2018

Hi, Caroline,

Right now, I'm not being able to export the PDF when adding the codes:
"There was an error in the export. Please check your log files." 

I'm still testing, though, and I'll let you know as soon as I can export.

Are you trying to export a page or a Space?

thais
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 13, 2018

Hi, Caroline,

Single page exports don't support adding HTML headers and footers via the PDF Layout page, but you can use CSS rules in the PDF Stylesheet page to produce headers and/or footers for a single page export.

Also, at this moment, it's not possible adding dynamic content in headers and/or footers of PDF exports, although we do have the following open feature requests to allow this functionality at
- Cloud: CONFCLOUD-16733 
- Server: CONFSERVER-16733

We suggest you add yourself as a watcher on the feature request regarding your instance (Cloud or Server), voting to increase its popularity. More information about how Atlassian implements New Features can be found in this page

We also suggest checking the following articles: 
- Customize Exports to PDF: Cloud / Server 
- Advanced PDF Export Customizations: Cloud / Server

Please let me know if this could clarify your question. :)

Caroline Busse April 17, 2018

Hi Thais,

 

I'm exporting the whole space, but also for single pages it's working...

Caroline Busse April 17, 2018

Again, by itself I can export the page title and the image in the header.

Just when bundling both features, only the title shows up.

 

Can maybe someone else help me?

Could someone maybe propose a code where both title and image are either in CSS or HTML?

 

Thanks!

Nanda Kops-Assendelft
Contributor
October 29, 2018

Hi Caroline,  

How can you export the image in the header?

If I use your example of HTML Code in the header space of the PDF Layout (of course with my own image link), it does not reacts if I export the single page to pdf:

 

 

<div style="margin-top: 10.0mm;">

        <img src="/download/attachments/3506317/FQS-logo2.png?version=1&modificationDate=1507885823393&api=v2" height ="50px" width="80px" />

</div>

I deleted everyting before 'download'. Also tried the entire link:

 

      <div style="margin-top: 10.0mm;">

        <img src=" http://confluence.next:8090/download/attachments/3506317/FQS-logo2.png?version=1&modificationDate=1507885823393&api=v2" height ="50px" width="80px" />

      </div>

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events