Feature: Extra Header / Footer Options

[beeing]

Hi, this is a library that I've thought of as an idea earlier. And thanks for sharing such useful library.

Just to make this library more versatile, there's some features that may be useful for more presentable reports.

1. Different first page header / footer
2. Custom "start from" page number
3. Odd/even page header / footer (not so important, usually for printing)

Hope you can consider the above options for your library.

Thanks in advance.

[PejmanNik]

Hi, Thank you for using it. 👍😁

Nice. I also have some useful features in mind, but I'm not sure how many users this package has. I'll be happy to develop it as long as it can help a few people.

By the way, I'm open to any PR.

[rafipiccolo]

i use this package sinces many months to generate people presentations : description, photos, admin documents, ... pretty nice rendering

[PejmanNik]

Thank you @rafipiccolo

[gmcouto]

I love this package as it lets me render properly footer and headers due to DPI change. What would be nice to have is the code for header and footer to be on a different html, so it's styles doesn't have to be on the main HTML also.

[rhadamez]

I have been searching this last week of some good library to generate pdf using nodejs at backend, the ones I found I get some problems like: performance, problems to render different header/footer, and the ones that solve these problems has a terrible syntax to code. Maybe this one is gonna get what I need. Gonna have a look.

[jpike88]

This feature is a dealbreaker for us, as we just want a header on the first page of the reports we make. We're currently using MPDF and would switch to this if it had that function

[PejmanNik]

@jpike88 There is a similar request, you can subscribe to get updated when it added to the lib https://github.com/PejmanNik/puppeteer-report/issues/31

[PejmanNik]

@beeing I'm here with a piece of good news :)

I'm working on a new React Lib (like React-pdf) but using puppeteer as the pdf generator in order to support HTML/CSS/JS. And that will resolve all these issues. We can customize the rendering algorithm in any way. So there will be all of the requested features with way more like footer notes, left/right static parts, custom tables, watermarks, etc.

I'll link all other requests to this one; hopefully, we will have a beta version in a month or two.

[PejmanNik]

As an update, we will have these components in the new lib. I think it will cover almost all the requested features.

[jpike88]

great news! love the mockups

[leqwasd]

Hi, I am considering using this. At this point, we are generating static HTML with react and react-dom/server, then feeding that html into Puppeteer's page, and rendering PDF.

I don't even care about the page numbers themselves, I just want a different footer on the first page, and a different on all of the other pages. The current "api" for detecting that is rather... Unappealing. In React - you cannot make onchange attribute like "onchange = onChange(this)", I had to add this line in the scripts to bind this the change function document.getElementById("footer").setAttribute("onchange", "onChange(this)");

Beside, having a footer like this:

        <div id="footer">
            <div id="footer-innner">
                pageNumber: <span className="pageNumber" />
            </div>
        </div>

And included script like this:

    document.getElementById("footer").setAttribute("onchange", "onChange(this)");
    function onChange(element) {
        const pageNumberElement = element.getElementsByClassName("pageNumber")[0];
        if (pageNumberElement.textContent === "1") {
            document.getElementById("footer-innner").style.display = "none";
        }
        if (pageNumberElement.textContent === "2") {
            pageNumberElement.style.color = "red"
        }
        if (pageNumberElement.textContent === "3") {
            pageNumberElement.style.color = "blue";
        }
    }

Just hides "the first" footer, but prints red on the first page, blue on the second page and nothing on the third page. I just think, this is too fragile system and API.

Why can't they just finish the darn CSS Paged Media Module Level 3 thing...

As I understand.. You cut #footer and #header, along with <style> and <script> tags, and make a new "page" to render a footer and header separately, right? If so, I think, if you would inject into heade a script, which just defines those 3 variables (pageNumber, pageCount and title) as a global variables.

then detecting the changes would be sipler -

<!-- This would be injected by the puppeteer-report -->
<script>
window.pageNumber = {x};
window.pageCount = {y};
window.title= {z};
</script>
<!-- This would be copy/pasted from our HTML -->
<script>
if (window.pageNumber % 2 === 0) {
    document.getElementById("footer").classList.add("odd");
} else {
    document.getElementById("footer").classList.add("even");
}
</script>

[1valdis]

@PejmanNik , you were not sure how many people would use this package... So after a few hours of banging my head against puppeteer's built-in pdf rendering, and particularly its issues around header and footer, your library is a lifesaver. It is so simple to use and I don't have to split main body, header and footer into different htmls and somehow hardcode/load them, they all just stay in one document and it's so convenient. Not only that - but works like charm too. Thank you very much for it!

To everyone who came here from Puppeteer issues list, definitely give this lib a try!

[zacol]

@PejmanNik Hi there :) Can you share with us what is the current progress? Maybe we can help somehow with the development?

[PejmanNik]

@zacol Hi, Thank you, sure. The development is almost done. But I think it needs a lot of tests to cover all the edge cases, but unfortunately, as the core parts are already done, and I need to do a lot of tests + debug + fix without any challenges, it is extremely frustrating for me, and I don't have any progress in the past month.

I'll try to clean the project and make it ready for the test, maybe you or anyone else have time to run more tests, and we can finally publish a beta version.

So in summary, the project needs a lot of tests + documentation.

[PejmanNik]

As an update I'm working on documentation now, I have only weekends and can take a while but I had great progress, also published this blog today about it: https://dev.to/pejmannik/jikji-layout-library-for-building-effortless-reports-in-react-4op4

[ChronicStone]

Hi @PejmanNik,

I've been quite hyped when you released your article, been following the progress since you announced your project, and I am really interested into helping testing / contributing. Are we gonna see an alpha/beta hit soon? Do you need any help to finalize / document the project?

Anyway, thanks for your work, even puppeteer-report is really well made, looking forward to see Jikji in action 😄

[PejmanNik]

Hi @ChronicStone, thank you for your interest. ❤ Yes, I think I'll release the alpha version next weekend. and I'm sure there will be a lot of bugs that need to be fixed. I will be happy to see your PRs 😁. I just published the documentation, I appreciate it very much if you have time to review and create PR to improve it, I'm not the best writer 🤦‍♂️

https://github.com/PejmanNik/jikji https://jikji.xyz/

ah, Thank you very much 🤩

[ChronicStone]

@PejmanNik Hi there,

Went through the docs, and this really looks amazing ! Some parts of the docs are a bit confuse, but guess I first need to play around with the lib to help improve it.

Can't wait to try the beta. when can he expect to start playing with it?

[PejmanNik]

Fair enough. I think it should be ready by next weekend. Can you please point me to which pages were confusing to you? Thank you

[PejmanNik]

@ChronicStone or anyone interested, I just publish the entire library and appreciate any feedback. https://github.com/PejmanNik/jikji