foliojs / pdfkit

A JavaScript PDF generation library for Node and the browser
http://pdfkit.org/
MIT License
9.8k stars 1.14k forks source link

Exclusive font family and size for one texe #1436

Open KenTay198 opened 1 year ago

KenTay198 commented 1 year ago

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 : Screenshot_1

Your environment

rohinthr commented 1 year ago

Once you finish everything in your Pdf, you can draw the footer last. (By switching between the pages)