Creating a complex layout & Paragraph nesting not allowed?

[d-vostrikov]

I'm currently trying to re-create this sort of layout, which is not final by any means:

Currently I've managed to create a footer that includes a banner, page number, and a separate section. However, I'm uncertain whether the implementation is correct because I'm facing an issue with nesting paragraphs. I suspect I need to use paragraphs to properly position them centered inside the parent paragraph, which is essentially treated as a colored shape at this point. When attempting to generate the document with nested paragraphs, Microsoft Word displays an error:

This is currently what I have:

import {
  AlignmentType,
  Document,
  Footer,
  FrameAnchorType,
  ImageRun,
  Packer,
  PageNumber,
  Paragraph,
  TextRun,
  VerticalPositionRelativeFrom,
} from 'docx'
import * as fs from 'fs'

const COLORS = {
  BACKGROUND: '#F2F2F2',
  PRIMARY: '#011D41',
  SECONDARY: '#29648A',
  NEUTRAL: '#6D7578',
  INFO: '#391934',
} as const

const cvData = {
  consultant: {
    name: 'Bob Smith',
    title: 'Full Stack Software Engineer',
  },
}

export const generateDocumentForConsultant = async (): Promise<string> => {
  const cvDocument = new Document({
    creator: 'CV Generator',
    description: `${cvData.consultant.name}'s CV`,
    sections: [
      {
        properties: {
          page: {
            margin: {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0,
            },
          },
        },
        footers: {
          default: new Footer({
            children: [
              new Paragraph({
                children: [
                  new ImageRun({
                    data: fs.readFileSync('./public/images/footer-image.png'),
                    floating: {
                      lockAnchor: true,
                      allowOverlap: false,
                      horizontalPosition: {
                        offset: 0,
                      },
                      verticalPosition: {
                        relative: VerticalPositionRelativeFrom.PARAGRAPH,
                        offset: 440000,
                      },
                      behindDocument: true,
                    },
                    transformation: {
                      width: 825,
                      height: 30,
                    },
                  }),
                ],
              }),
              new Paragraph({
                alignment: AlignmentType.RIGHT,
                indent: {
                  right: 500,
                },
                children: [
                  new TextRun({
                    allCaps: true,
                    font: 'Calibri',
                    color: COLORS.SECONDARY,
                    children: [`${cvData.consultant.name}| `, PageNumber.CURRENT],
                  }),
                ],
              }),
            ],
          }),
        },
        children: [
          new Paragraph({
            frame: {
              width: 3500,
              height: 16350,
              anchor: {
                horizontal: FrameAnchorType.MARGIN,
                vertical: FrameAnchorType.MARGIN,
              },
              position: {
                x: 0,
                y: 0,
              },
            },
            shading: {
              fill: COLORS.PRIMARY,
            },
            children: [
              new Paragraph({
                alignment: AlignmentType.CENTER,
                children: [
                  new TextRun({
                    text: cvData.consultant.name,
                    color: COLORS.NEUTRAL,
                    font: 'Calibri',
                    size: 100,
                  }),
                ],
              }),
            ],
          }),
        ],
      },
    ],
    background: { color: COLORS.BACKGROUND },
  })

  return await Packer.toBase64String(cvDocument)
}

I'd also like to mention that the concept of generating documents is relatively new to me.

[d-vostrikov]

Perhaps I am going about it the wrong way and should create the entire layout by hand. Then, I can use the patcher to fill in the data instead of doing it all in code.

[d-vostrikov]

I moved away from this library as the patcher didn't work properly (didn't find any tags within sections or shapes), so I continued with Apache POI.