Is it possible to have a font styling exclusive to one text ?
Description
I want to make a footer with page count and a special styling, but when a page is automatically added, the first element of the page takes the same style as the footer instead of the style I defined earlier. I assume the text takes the style I want before going in the margin and provoking a page change, so the footer now goes first and change the style my text is appearing, but don't know how to fix.
Code sample
On pageAdded footer is this function :
const footer = (doc: PDFKit.PDFDocument, pageNumber: number) => { doc .font("Helvetica") .fontSize(18) .fill("#34718e") .text(${pageNumber}, undefined, doc.page.height - 200, { align: "center", }) .text("", 50, 50); };
These functions are mapped through an array and automatically generate pages depending on content :
`
const formationPage = (
doc: PDFKit.PDFDocument,
formation: Formation,
formationIndex: number,
pageIndex: number
) => {
const properties = getFormationProperties(
"logiciels-bureautiques",
formation
);
Question
Is it possible to have a font styling exclusive to one text ?
Description
I want to make a footer with page count and a special styling, but when a page is automatically added, the first element of the page takes the same style as the footer instead of the style I defined earlier. I assume the text takes the style I want before going in the margin and provoking a page change, so the footer now goes first and change the style my text is appearing, but don't know how to fix.
Code sample
On pageAdded footer is this function :
const footer = (doc: PDFKit.PDFDocument, pageNumber: number) => { doc .font("Helvetica") .fontSize(18) .fill("#34718e") .text(
${pageNumber}, undefined, doc.page.height - 200, { align: "center", }) .text("", 50, 50); };
These functions are mapped through an array and automatically generate pages depending on content : ` const formationPage = ( doc: PDFKit.PDFDocument, formation: Formation, formationIndex: number, pageIndex: number ) => { const properties = getFormationProperties( "logiciels-bureautiques", formation );
doc .addPage({ margin: 50 }) .font("Helvetica-Bold") .fontSize(20) .fill("#34718e") .text(
Fiche de formation ${formationIndex}
, { align: "center", }) .fontSize(17) .fill("#8f153a") .text(FF${formationIndex} - ${formation.name}
) .moveDown(lineBreak) .fontSize(12);if (properties && properties.length > 0) { for (let i = 0; i < properties.length; i++) { formationProperty(doc, properties[i]); } } };
const formationProperty = ( doc: PDFKit.PDFDocument, { label, value }: FormationProperty ) => { doc .fontSize(12) .fill("#34718e") .font("Helvetica-Bold") .text(
${label} :
, { continued: !Array.isArray(value) }) .fill("#000") .font("Helvetica");if (Array.isArray(value)) { doc.list(value); } else { doc.text(
${value || " "}
); }doc.moveDown(lineBreak); }; `
Here is a screenshot of the pdf result :
Your environment