element with the provided className
2. Uses getComputedStyle() to read the final computed CSS values
3. Converts pixel values to PDF units (mm for dimensions, pt for fonts)
4. Maps CSS properties to PDF renderer properties
5. Validates and warns about unsupported properties

Components

$3

The main wrapper component that provides context and handles PDF generation.

Props:

- options: PDF configuration (format, margins, fonts, etc.)
- metadata: Document metadata (title, author, subject, keywords)
- header: Custom header render function (renderer, page, total) => void
- footer: Custom footer render function (renderer, page, total) => void
- pageNumbers: Page numbering configuration
- centerLabel: Center label/watermark configuration
- onReady: Callback when PDF is ready (renderer) => void
- filename: Filename for auto-save
- autoSave: Automatically save PDF when rendered (default: false)

$3

Renders a paragraph of text. Automatically wraps to the content width.

Props:

- fontSize (number): Font size in points.
- fontStyle ('normal' | 'bold' | 'italic' | 'bolditalic'): Font style.
- color (string): Hex color (e.g., "#FF0000") or RGBA (e.g., "rgba(255, 0, 0, 0.5)").
- align ('left' | 'center' | 'right' | 'justify'): Text alignment.
- lineHeight (number): Line height multiplier.
- spacingBelow (number): Vertical space (mm) to add after the paragraph.
- className (string): CSS class names for styling (supports Tailwind and other frameworks).
- style (React.CSSProperties): Inline styles object.
- showInAllPages (boolean): Make this text appear on multiple pages.
- scope ('all' | 'first-only' | 'except-first' | number[]): Which pages to show on.

`tsx
fontSize={14}
fontStyle="bold"
color="#333333"
align="center"
spacingBelow={5}
>
I am a centered, bold heading.
;

{
/ Recurring header on all pages except first /
}

Document Header
;
`

$3

A robust table component designed for dynamic data.

Key Features:

- Auto-layout: Columns can use explicit widths or percentage-based widths.
- Spanning: Support for rowSpan and colSpan.
- Page Breaking: Smartly handles page breaks, ensuring rows with rowspans are kept together if possible.
- Styling: Supports granular padding (paddingTop, paddingLeft, etc.) and borders.
- Alignment: Supports both horizontal (align) and vertical (verticalAlign) alignment.
- Striped Rows: Alternating row colors for better readability.
- Header Repeat: Optionally repeat header row on each page.

Props:

- data: Array of objects or cell definitions.
- columns: Array of column definitions { header, accessor, width, align }.
- width: Table width (number or string percentage like "100%").
- borderWidth, borderColor: Global table border settings.
- headerStyle, rowStyle: Default styles for headers and rows.
- cellPadding: Default padding for cells (number or object).
- striped (boolean): Enable alternating row colors.
- repeatHeader (boolean): Repeat header on each page (default: true).
- className (string): CSS class names for styling.
- style (React.CSSProperties): Inline styles object.

Complex Cell Example:

`tsx
width="100%"
striped={true}
repeatHeader={true}
borderWidth={0.5}
headerStyle={{ fillColor: "#f3f4f6", fontStyle: "bold" }}
columns={[
{ header: "ID", accessor: "id", width: 10 },
{ header: "Description", accessor: "desc", width: "auto" },
{ header: "Price", accessor: "price", width: 20, align: "right" },
]}
data={[
// Simple Row
{ id: 1, desc: "Standard Item", price: "$10.00" },

// Row with Spans and Custom Styles
{
id: "2",
desc: {
content: "I span 2 rows and am vertically centered",
rowSpan: 2,
style: {
fillColor: "#e0f2fe",
align: "center",
verticalAlign: "middle", // 'top' | 'middle' | 'bottom'
paddingTop: 5,
},
},
price: "$20.00",
},
// Next row must account for the rowspan above
{ id: 3, desc: null, price: "$5.00" },
]}
/>
`

$3

Embed images (JPEG/PNG).

Props:

- src (string): URL or Base64 data of the image.
- x, y (number): Optional fixed coordinates. If omitted, uses flow layout.
- w, h (number): Explicit dimensions. If only one is provided, aspect ratio is maintained.
- align ('left' | 'center' | 'right'): Horizontal alignment (flow mode only).
- layout ('fixed' | 'flow'): Layout mode (default: 'fixed').
- sizing ('fit' | 'fill' | 'auto'): How to size the image (default: 'fit').
- className (string): CSS class names for styling.
- style (React.CSSProperties): Inline styles object.
- showInAllPages (boolean): Make this image appear on multiple pages.
- scope ('all' | 'first-only' | 'except-first' | number[]): Which pages to show on.

Flow Behavior: In flow mode, if an image is too tall for the remaining page space, it will automatically trigger a page break and render on the next page.

`tsx
{
/ Flow layout with auto-sizing /
}
src="https://example.com/logo.png"
h={20}
align="center"
layout="flow"
sizing="fit"
/>;

{
/ Recurring logo on all pages /
}
;
`

$3

A container component for grouping content, adding borders, backgrounds, or margins/padding. It is the primary container for both flow and absolute layouts.

Props:

- style: Object with margin, padding (granular: marginTop, paddingLeft etc.), borderWidth, borderColor, fillColor, radius, gap.
- className (string): CSS class names for styling (supports gap, padding, margin, borders, backgrounds).
- x, y, w, h: Optional props for absolute positioning. If provided, the view will be placed at exactly these coordinates.
- children: Nested components to render inside the view.
- showInAllPages (boolean): Make this view appear on multiple pages.
- scope ('all' | 'first-only' | 'except-first' | number[]): Which pages to show on.

`tsx
style={{
marginTop: 10,
marginBottom: 10,
padding: 5,
borderWidth: 0.2,
borderColor: "#ccc",
fillColor: "rgba(240, 240, 240, 0.5)",
}}
>
Content inside a styled box.

`

$3

Renders bulleted or numbered lists.

Props:

- items: Array of strings.
- ordered: Boolean. true for numbered (1., 2.), false for bullets.
- indent: Number (mm) for indentation. Default 5.
- markerWidth: Number (mm) for the marker area. Default 5.
- spacing: Number (mm) for space between items. Default 2.
- className (string): CSS class names for styling list items.
- style: TextStyle object for the list items.

`tsx
ordered={true}
indent={10}
spacing={3}
items={["First item", "Second item", "Third item"]}
/>
`

Global Document Features

Configuration is passed via the PdfDocument props.

$3

Automatically adds page numbers to every page (or specific pages) with full customization.

`tsx
pageNumbers={{
enabled: true,
position: "footer", // 'header' | 'footer'
align: "right", // 'left' | 'center' | 'right'
preset: "page-slash-total", // 'Page 1/10', '1/10', 'Page 1 of 10'
scope: "except-first", // 'all' | 'first-only' | 'except-first' | [2,3,5]
template: "Pg {page} / {total}", // Custom template (overrides preset)
format: "arabic", // 'arabic' | 'roman-upper' | 'roman-lower'
y: 285, // Custom Y position (optional)
offsetX: 0, // X offset from alignment (optional)
style: { fontSize: 9, color: "#666" }
}}
>
`

$3

Adds a centered label (e.g., "CONFIDENTIAL") to the header or footer area.

`tsx
centerLabel={{
enabled: true,
text: "CONFIDENTIAL",
position: "header", // 'header' | 'footer'
scope: "all", // 'all' | 'first-only' | 'except-first' | [2,3,5]
y: 10, // Custom Y position (optional)
offsetX: 0, // X offset (optional)
style: { color: "red", fontSize: 12 }
}}
>
`

$3

For complete control, use custom render functions:

`tsx
header={(renderer, page, total) => {
const pdf = renderer.instance;

// Set font and color
pdf.setFontSize(10);
pdf.setTextColor("#333");

// Draw custom header
pdf.text("My Company", renderer.contentLeft, 10);
pdf.text(Page ${page}, renderer.contentRight, 10, { align: 'right' });

// Draw a line
pdf.setDrawColor("#e5e7eb");
pdf.setLineWidth(0.5);
pdf.line(renderer.contentLeft, 12, renderer.contentRight, 12);
}}
footer={(renderer, page, total) => {
const pdf = renderer.instance;
const y = renderer.height - 10;

pdf.setFontSize(9);
pdf.setTextColor("#666");
pdf.text("© 2024 My Company", renderer.contentLeft, y);
}}
>
`

$3

Set PDF document metadata for better organization and searchability:

`tsx
metadata={{
title: "Annual Report 2024",
author: "John Doe",
subject: "Financial Analysis",
keywords: ["finance", "report", "2024", "analysis"]
}}
>
`

$3

Configure page size and orientation:

`tsx
options={{
format: "a4", // "a4", "letter", or custom [width, height] in mm
orientation: "p", // "p" for portrait, "l" for landscape
margin: { top: 20, right: 15, bottom: 15, left: 15 },
}}
>

{/ Custom page size /}
options={{
format: [210, 297], // Custom size in mm (width, height)
orientation: "p",
}}
>
`

Advanced Features

$3

Make any component appear on multiple pages using showInAllPages and scope:

`tsx
{
/ Appear on all pages /
}

This appears on every page
;

{
/ Appear on all pages except the first /
}
src="logo.png"
showInAllPages
scope="except-first"
x={10}
y={10}
h={15}
/>;

{
/ Appear only on first page /
}

Cover page content
;

{
/ Appear on specific pages /
}

This appears only on pages 2, 3, and 5
;
`

$3

All color props support both hex and RGBA formats:

`tsx
Red text
Semi-transparent red text


Content with semi-transparent blue background

`

$3

Automatically save the PDF when it's generated:

`tsx

{/ PDF will automatically download when rendered /}

`

TypeScript Support

This library is written in TypeScript and includes complete type definitions. All components and props are fully typed for the best developer experience.

`tsx
import { PdfDocument, PdfText, PdfDocumentProps } from "react-vector-pdf";

const MyComponent: React.FC = () => {
const pdfOptions: PdfDocumentProps["options"] = {
format: "a4",
orientation: "p",
margin: { top: 20, right: 15, bottom: 15, left: 15 },
};

return (

Fully typed!

);
};
``

License

MIT