OnedocLabs
PageTop not replicated in all the pages
The PageTop componend does not get replicated in all the pages when rendering a pdf.
<PageTop className="flex h-auto items-center justify-between">
...omitted
</PageTop>
What would the solution be?
Hey @dichioniccolo! Thanks for reaching out. Could you send the example code for this document? Most importantly, if there are different margin settings on the first and subsequent pages as the page top component lives in the margin regions.
Thanks!
Hi @Titou325
Here it is!
<>
<CSS>
{String.raw`
@page {
size: a4;
margin: 0.25in;
}
body {
line-height: 1.1;
}
`}
</CSS>
<Tailwind>
<div>
{/* h-auto needed because PageTop has automatically a 100% height and pushes the content of the first page to the second page */}
<PageTop className="flex h-auto items-center justify-between">
<div className="flex flex-1 gap-2">
<div className="flex flex-1 flex-col items-center justify-center">
<p className="text-base font-bold">
{t.vin()}: {vin.code}
</p>
<p className="text-sm">
{t.productionOrder()}: {vin.order.code}
</p>
<p className="text-xs">
{t.print.date()}: {format(new Date(), "dd-MM-yyyy HH:mm:ss")}
</p>
</div>
</div>
<svg
className="h-16 w-60"
dangerouslySetInnerHTML={{
__html: svg,
}}
/>
</PageTop>
<h2 className="mt-4 text-center text-sm font-bold">
{t.print.summaryOfActivitiesWithErrors()}
</h2>
<table className="mt-2 w-full">
<thead>
<tr className="border border-gray-300 bg-black text-xxs font-bold text-white">
<th className="py-2 pl-4 text-left text-xs font-bold">
{t.line.segment()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.line.workstation()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.activity()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.activities.table.type()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.workOutcome()}
</th>
</tr>
</thead>
<tbody>
{segments.map((segment) => (
<React.Fragment key={segment.id}>
{segment.workstations.map((workstation, workstationIndex) => (
<React.Fragment key={workstation.id}>
{workstation.activityEvaluations.map(
(activityEvaluation, activityIndex) => (
<tr
className="border-b border-gray-300"
key={activityEvaluation.id}
>
<td className="py-2 pl-4 text-left text-xs">
{workstationIndex === 0 &&
activityIndex === 0 &&
segment.name}
</td>
<td className="py-2 text-left text-xs">
{activityIndex === 0 && workstation.name}
</td>
<td className="py-2 text-left text-xs">
{activityEvaluation.name}
</td>
<td className="py-2 text-left text-xs">
{(activityEvaluation.type ===
ActivityType.SCREWING ||
activityEvaluation.type ===
ActivityType.SPECIAL_EQUIPMENT) && (
<>
{translateProgramName(
t,
activityEvaluation.programEvaluation?.name,
)}
</>
)}
{activityEvaluation.type ==
ActivityType.MARRIAGE && (
<>
{translateActivityType(
t,
valueToKey(
ActivityType,
activityEvaluation.type as ActivityType,
),
)}
</>
)}
</td>
<td className="py-2 text-left text-xs">
{translateActivityResult(
t,
valueToKey(
Status,
activityEvaluation.status as Status,
),
)}
{activityEvaluation.programEvaluation && (
<>
{" - "}
{activityEvaluation._count.results}/
{activityEvaluation.programEvaluation
.quantity +
activityEvaluation.programEvaluation
.reworkQuantity}
</>
)}
</td>
</tr>
),
)}
</React.Fragment>
))}
</React.Fragment>
))}
</tbody>
</table>
</div>
</Tailwind>
</>
Thanks a lot!
Hey @dichioniccolo, thanks for your patience! We were unable to reproduce this issue. Based on the provided screenshot and your code, it seems that the React-Print CSS may not get loaded correctly. Could you provide more information on how you use the compile function? This could also happen if your margin is too small, as the PageTop component lives in the margin. (e.g. the 0.25in are too small to display the header), but that should also happen on the first page.
Here is the test code we used on our (https://onedoclabs.com/) playground:
import { Footnote, PageBottom, Tailwind, CSS, PageTop, PageBreak } from "@onedoc/react-print";
import { QRCodeSVG } from "qrcode.react";
import { ArrowRightIcon } from "@heroicons/react/20/solid";
import React from "react";
export const App = () => {
return (
<Tailwind>
<CSS>
{String.raw`
@page {
size: a4;
margin: 0.25in;
}
body {
line-height: 1.1;
}
`}
</CSS>
<div>
{/* h-auto needed because PageTop has automatically a 100% height and pushes the content of the first page to the second page */}
<PageTop className="flex h-auto items-center justify-between">
<div className="flex flex-1 gap-2">
<div className="flex flex-1 flex-col items-center justify-center">
<p className="text-base font-bold">
Test
</p>
<p className="text-sm">
Test
</p>
<p className="text-xs">
Date
</p>
</div>
</div>
</PageTop>
<table>
<thead>
<tr>
<td><b>Test</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr><tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr></tbody>
</table>
Test
<PageBreak />
Test 2
<PageBreak />
Test 3
</div>
</Tailwind>
);
};
export default App;
I'm facing the same issue and the playground responds with a 500 when I try to test my template
Hi @homj! Could you provide your test document?
Here is a sample test document that you can copy/paste in the playground. I have tested it right now and it seems to work as intended. There are two things to keep in mind when using the PageTop and PageBottom components, 1. they must be placed early in the document, and 2. the documents needs to have margins. If not, they won't be visible.
Let me know if this is still not the expected behavior!
import React from "react";
import { Tailwind, PageTop, PageBreak } from "@fileforge/react-print";
const Document = () => (
<Tailwind>
<PageTop>
This is a page top.
</PageTop>
<main>
<h1 className="text-2xl font-bold">Hello, world!</h1>
<p>Hey from Fileforge!</p>
<PageBreak/>
<p>This is a second page</p>
</main>
</Tailwind>
);
export default Document;
Hi @Titou325 !
I am having a similar issue here, my PageTop or PageBottom are visible, but they are not on the correct position as expected.
for eg Expect: PageBottom always at the bottom of the page on every page Reality: PageBottom follows my main content, and it only shows once
- I am simply using compile to generate the html string, and then use htmltopdf to generate a pdf, is there any css I need to manually load ?
Hi and thanks for the detailed explanation!
These components will only work properly with the Fileforge renderer, however you should be able to achieve a somewhat similar effect with the <page_header> and <page_footer> tags (as seen https://github.com/spipu/html2pdf/blob/master/doc/page.md)
There will be discrepancies and they are much less flexible than Fileforge's, but they could be fitting depending on your use case.
We have received considerable feedback to make it more clear what works with what on our docs, and I am working on it.
Have a great day!
Hi and thanks for the detailed explanation!
These components will only work properly with the Fileforge renderer, however you should be able to achieve a somewhat similar effect with the
<page_header>and<page_footer>tags (as seen https://github.com/spipu/html2pdf/blob/master/doc/page.md)There will be discrepancies and they are much less flexible than Fileforge's, but they could be fitting depending on your use case.
We have received considerable feedback to make it more clear what works with what on our docs, and I am working on it.
Have a great day! @Titou325 Just so I am undetstanding correctly, are you saying that we can only use <PageTop> and <PageBottom> if we are using your (paid) FileForge rendered?
Hi @ejscheepers,
Some components will work perfectly fine with other renderers. For example, our Tailwind component will work fine, as will the Markdown or Latex ones.
Components that tap into the layout system do not have a direct equivalent in most renderers, as their implementation is often partial or subpar. If you take an HTML to PDF service that uses a headless browser, you only have extremely limited options for headers and footers, and simply put, it is technically not feasible to provide the same level of control we can provide on software we ship.
To clear any confusion regarding what should/shouldn't work, we will be adding a compatibility matrix to the components to help highlight any unsupported areas right away.
We are also very open to implementing several versions of a same component for various backends, and welcome contributions in this regard.
Hope this helps!