How to add page header with project data and logo that repeats on each page? #389

Proektsoftbg · 2024-11-16T14:59:13Z

Proektsoftbg
Nov 16, 2024
Maintainer

Hi!

I recieved this question many times recently, so I decided to create such an example for everyone.

We know that Calcpad supports Html, so implement our header as an Html table. But how to make it appear on each page automatically? The good news is that this is a built-in feature of Html tables. If a table has a <thead> and a <tbody> that spans accross several pages, the browser engine will automatically repeat the <thead> content on each page. So, we will add such a <thead> element with the project data inside and a <tbody> element with a single row and cell that will contain the entire code for our worksheet.

To demonstrate how it works, I created a sample template:
https://github.com/Proektsoftbg/Calcpad/tree/main/Examples/Demos/Page%20header%20with%20logo

You can download the above code for free, and modify it as you want, according to your needs. The best way to use it, is to wrap the code into macro variables/functions and save it as a module. Then you can include the module in all other project worksheets and insert the macros:

hashtag#include Header.cpd
header_start$
'Your worksheet content goes here.
header_end$

After that, once you change any common project data, it will reflect in all project worksheets.

sononicola · 2024-11-18T13:54:31Z

sononicola
Nov 18, 2024

If the file is more than 2 pages the table overlaps the text:

0 replies

javila · 2024-12-29T21:13:21Z

javila
Dec 29, 2024

Hi, @Proektsoftbg!

As pointed out by @sononicola, the headers will overlap the text in generated PDFs:

Of course, you can add some blank lines in your Calcpad documents to avoid overlaps. However, I got way better results using wkhtmltopdf --header-html option (#418) directly/manually (as you can see, this option will even insert the correct page numbers! - and that's a thing you can't do with the table approach):

3 replies

sononicola Dec 30, 2024

Hi
How does it work?

javila Jan 1, 2025

Hi!

It was quite simple:

Save the Calcpad's output as a Html file (test.html)
Create a Html header file (header.html)
Run: wkhtmltopdf.exe --enable-local-file-access --disable-smart-shrinking --page-size A4 --margin-bottom 15 --margin-left 15 --margin-right 10 --margin-top 50 --header-html header.html --header-spacing 5 test.html test.pdf

Here is the header.html contents (the script section came directly from the wkhtmltopdf documentation):

<!DOCTYPE html>
<html>
    <head>
        <script>
            function subst() {
                var vars = {};
                var query_strings_from_url = document.location.search.substring(1).split('&');
                for (var query_string in query_strings_from_url) {
                    if (query_strings_from_url.hasOwnProperty(query_string)) {
                        var temp_var = query_strings_from_url[query_string].split('=', 2);
                        vars[temp_var[0]] = decodeURI(temp_var[1]);
                    }
                }
                var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages'];
                for (var css_class in css_selector_classes) {
                    if (css_selector_classes.hasOwnProperty(css_class)) {
                        var element = document.getElementsByClassName(css_selector_classes[css_class]);
                        for (var j = 0; j < element.length; ++j) {
                            element[j].textContent = vars[css_selector_classes[css_class]];
                        }
                    }
                }
            }
        </script>
        <style>
            .header {
                font-size: 12pt;
                font-family: Calibri, sans-serif;
                margin-left: 1.5em;
            }
            .header h4 {
                font-family: Arial, Helvetica, sans-serif;
                margin: 0;
                padding: 0;
                line-height: 150%;
            }
            .header table {
                width: 100%;
                max-width: 170mm;
                border-collapse: collapse;
            }
            .header th {
                border: solid 1pt lightgray;
                text-align: left;
                font-size: 90%;
                padding: 2pt 4pt 2pt 4pt;
                vertical-align: top;
            }
            .header p {
                margin: 0.3em 0 0.3em 0;
                padding: 0;
                line-height: 1em;
            }
            .header .logo {
                width: 80pt;
                height: 17.6pt;
                float: right;
                margin-top: 3pt;
            }
            .header small { font-weight: normal; }
            .header .addr{ margin-bottom: 8pt; }
            .header .pr{ font-size:130%; }
        </style>
    </head>
    <body class="header" onload="subst()">
        <table>
            <thead>
                <tr>
                    <th rowspan=3>
                        <img class="logo" src="./logo.png" alt="logo.png">
                        <h4>Proektsoft EOOD<sup>&reg;</sup></h4>
                        <p class="addr"><small>34-36 Peyo Yavorov blvd, 1164 Sofia, tel. +359 2 423 4455<br/>email:&emsp;<a href="mailto:proektsoft.bg@gmail.com">proektsoft.bg@gmail.com</a></small></p>
                        <p><small>Project:&ensp;</small><b class="pr">24 Kensington Road Residential</b></p>
                        <p><small>Client:&emsp;</small>Dream Home Development Ltd</p>
                    </th>
                    <th><small>Date:</small><br/>11/2024</th>
                    <th><small>Page:</small><br/><span class="page"></span>/<span class="topage"></span></th></tr><tr>
                    <th><small>Job No:</small><br/>1001</th>
                    <th><small>Revision:</small><br/>0</th></tr><tr>
                    <th><small>Design by:</small><br/>ABC</th>
                    <th><small>Check by:</small><br/>DEF</th>
            </tr>
            </thead>
        </table>
    </body>
</html>

sononicola Jan 2, 2025

Many thanks, I'll try it!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add page header with project data and logo that repeats on each page? #389

{{title}}

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to add page header with project data and logo that repeats on each page? #389

Proektsoftbg Nov 16, 2024 Maintainer

Replies: 2 comments · 3 replies

sononicola Nov 18, 2024

javila Dec 29, 2024

sononicola Dec 30, 2024

javila Jan 1, 2025

sononicola Jan 2, 2025

Proektsoftbg
Nov 16, 2024
Maintainer

Replies: 2 comments 3 replies

sononicola
Nov 18, 2024

javila
Dec 29, 2024