Custom footer and header

[MassoudSharifi]

I want to print a list of products. I want to print the date and name of the company on the footer of each page and remove the existing footer and Header

[MatthewHerbst]

Hello. What is your question or problem you are having with the library?

[MassoudSharifi]

@MatthewHerbst How to edit the ringed places in the image

[MatthewHerbst]

Did you modify the pageStyle prop? The default value has a style that removes the header/footer:

pageStyle: "@page { size: auto;  margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }", // remove date/time from top

[MassoudSharifi]

@MatthewHerbst I remove the default footer and header but I cannot add a custom footer for multiple pages

[MatthewHerbst]

Can you please share the code you are using? Very difficult for me to help otherwise

[MassoudSharifi]

@MatthewHerbst Yes, the code is here. and also want to add page numbers in the footer of each page
https://codesandbox.io/s/awesome-brook-0bhtg?file=/src/example/index.js:107-112

[MassoudSharifi]

@MatthewHerbst Can you help me with how to solve this problem ????

[MatthewHerbst]

Apologies, I was traveling and not working.

It does seem there is a bug with pageStyle, I'm looking into that now. You don't have to use pageStyle, and I actually plan to remove it in the next major release. Just use @media print { ... } in your existing CSS and set styles there.

In terms of creating a footer/header, there are two options beyond what you are trying to do. The first is to use a table (example: https://plnkr.co/edit/lWk6Yd?preview). The second is to use the new CSS 3 Page Margin Boxes (see spec + examples here: https://www.w3.org/TR/css-page-3/#margin-boxes)

I will update once I know more about the bug, it's very strange

[MassoudSharifi]

@MatthewHerbst how to use CSS 3 Page Margin Boxes. is there a library to install? because nothing working without page size property in CSS

[MatthewHerbst]

I'm honestly not sure, I had never heard of them until I was researching your problem. Asking on StackOverflow might be best for that. Apologies for the delayed response, I have had to focus on work the last two weeks. I hope to be able to get some time in for this library this coming weekend.

[clydebaron2000]

A follow up on page margin boxes support?

[Dmitriy-Krivetsky]

Maybe it will help someone
Through this function, I was able to make a watermark on all pages, as well as the header and the footer.

 const handlePrint = useReactToPrint({
   content: () => {
      const tableStat = tableStatRef.current.cloneNode(true);
      const PrintElem = document.createElement('div');
      const header = 
        `<img src="${logo}" alt="" class="watermark"/>` + 
        `<div class="page-footer">I'm The Footer</div>`;
      PrintElem.innerHTML = header;
      PrintElem.appendChild(tableStat);
      return PrintElem;
    },
});

@media print {
  .watermark {
    position: fixed;
    top: 50vh;
    z-index: 9;
    width: 50vw;
    page-break-after: always;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .1;
  }
  div.page-footer {
    position: fixed;
    z-index: 9;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 15px;
    color: #fff;
    background: red;
    opacity: 0.5;
    page-break-after: always;
  }
}

for me, the key values were:

page-break-after: always;
z-index: 9;

#323 (comment)

[sadidul012]

This code worked for me with a watermark, sticky footer, header for each page

HTML

            <img alt={""} src={logo} className={"watermark"}/>
            <table className="report-container">
                <thead className="report-header">
                <tr>
                    <th className="report-header-cell">
                        <div className="header-info">
                            header content....
                        </div>
                    </th>
                </tr>
                </thead>
                <tfoot className="report-footer">
                <tr>
                    <td className="report-footer-cell">
                        <div className="footer-info">
                            <div className={"page-footer"}>
                                footer content....
                            </div>
                        </div>
                    </td>
                </tr>
                </tfoot>
                <tbody className="report-content">
                <tr>
                    <td className="report-content-cell">
                        <div className="main">
                            body content...
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

CSS

div.page-footer {
    text-align: center;
    height: 50px;
    font-size: 10px;
    opacity: 0.8;
    position: fixed;
    bottom: 0;
    width: 100%;
}

div.page-footer p {
    margin: 0;
}

.watermark {
    display: none;
    top: 50vh;
    z-index: -9;
    width: 50vw;
    page-break-after: always;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .1;
}

table.report-container {
    page-break-after: always;
    width: 100%;
}

thead.report-header {
    display: table-header-group;
}

tfoot.report-footer {
    display: table-footer-group;
}

div.footer-info, div.page-footer {
    display: none;
    height: 60px;
}


@media print {
    @page {
        size: A4;
        margin: 16mm 16mm 16mm 16mm;
    }

    .watermark {
        display: block;
        counter-increment: page;
        position: fixed;
    }

    div.page-footer, div.footer-info {
        display: block;
    }
}

[prakashmahto01]

how to remove header/footer in first page ???

[hempun10]

how to remove header/footer in first page ???

Hey @prakashmahto01 Have you found any solution?

[HarveyNek]

Hello! In the provided example (CodeSandBox) which i use with functional component i want to print a specific header to every page that is printed..also this header i want to be hidden from user and be shown only in the printed sheet. In other words, i want to print in every page a title "This was printed by user XX in DATE". I tried many ways to resolve this, but i printed the header only in the first page. So it would be helpful if anyone has the idea of how to achieve that.