pdfkit alignment fail when setting position

Question

when i generate pdf from html to pdf with node js via pdfkit i'm facing some issue. how can i set or add test in ractangle in pdfkit? it very confusing.

const PDFDocument = require('pdfkit');
const fs = require('fs');
const { initForm, text } = require('pdfkit');

function generateHr(doc, y) {
    doc
        .strokeColor("back")
        .lineWidth(1)
        .moveTo(50, y)
        .lineTo(550, y)
        .stroke();
}

// Create a document
const doc = new PDFDocument();
let name = 'Chris';
// Pipe its output somewhere, like to a file or HTTP response
// See below for browser usage
doc.pipe(fs.createWriteStream('output.pdf'));

doc.initForm();


//   .font('fonts/PalatinoBold.ttf')
doc.fontSize(25).text('SERVICE REPORT', { border: 'black 1px', align: 'center' });
doc.moveDown();
doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('CONTACT NAME : ', { align: 'left' }, 120);

doc.moveDown();
doc.rect(30, 30, 550, 1000).stroke("#0032ff");
// doc.text("sampleText", 10, 22);

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    
    .rect(200, 117, 370, 15).stroke("#000")
    // .text("text");
  .text('Text ', 120, 120,{lineBreak: false});


doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    
    .text('JOB TITLE : ', { align: 'left' }, 140);



doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('TEST ', { align: 'center' }, 140);
doc.moveDown();



doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('JOB DETAIL : ', { align: 'left' }, 160);
doc.moveDown();

)
    .moveDown()
    .text('TUE NOV 01-11-2022 ', { align: 'left' }, 315);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('DATE OF COMPLETION : ', { align: 'right' }, 300);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(10)
    .moveDown()
    .text('TUE NOV 01-11-2022 ', { align: 'right' }, 315);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('EMPLOYEE: ', { align: 'left' }, 340);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('BANTU ', { align: 'center' }, 340);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('ENTRY TIME: ', { align: 'left' }, 360);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(10)
    .moveDown()
    .text('October 27th 2022, 5:28:19 pm ', { align: 'left' }, 380);
doc.moveDown();



doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(12)
    .moveDown()
    .text('EXIT TIME: ', { align: 'right' }, 360);
doc.moveDown();

doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(10)
    .moveDown()
    .text('October 27th 2022, 5:28:21 pm ', { align: 'right' }, 380);



doc
    //   .font('fonts/PalatinoBold.ttf')
    .fontSize(10)
    .moveDown()
    .text('ON SITE TIME : ', { align: 'left' }, 420);
doc.moveDown();



doc
    //   .font('fonts/PalatinoBold.ttf')```````
    .fontSize(10)
    .moveDown()
    .text('OFF SITE TIME : ', { align: 'right' }, 420);
doc.moveDown();



doc.end();

but i got like this

Answer 1

Since your PDF has no continuous text and it needs to be like a form.

It will be difficult to create PDF with PDFKit's inbuilt alignment and line wrapping property for your customized form design.

You could use absolute positioning for the text and rects, it would give you more control to design your form like PDF.

Sample code below for your reference.

    doc.rect(30, 30, 550, 1000).stroke("#0032ff");

    doc.fontSize(25).text('SERVICE REPORT', { border: 'black 1px', align: 'center' });

    doc.fontSize(12).text('CONTACT NAME : ', 60, 120);
    doc.fontSize(12).rect(200, 117, 370, 15).stroke("#000").text('Text ', 220, 120);

    doc.fontSize(12).text('JOB TITLE : ', 60, 150);
    doc.fontSize(12).rect(200, 147, 370, 15).stroke("#000").text('Text ', 220, 150);

    doc.fontSize(12).text('JOB DETAIL : ', 60, 180);
    doc.fontSize(12).rect(200, 177, 370, 15).stroke("#000").text('TUE NOV 01-11-2022 ', 220, 180);

Sample Output