pdfme

https://pdfme.com/docs/getting-started
Admin
pdfme is a JavaScript library for designing and generating PDFs programmatically. It offers tools...
Tokens:10,120
Snippets:76
Trust Score:7.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install pdfme Generator and Common Packages

Source: https://pdfme.com/docs/getting-started/getting-started

Installs the necessary npm packages for generating PDFs using pdfme, including the core generator and common utilities.

```Shell
npm i @pdfme/generator @pdfme/common
```

--------------------------------

### Install pdfme UI and Common Packages

Source: https://pdfme.com/docs/getting-started/getting-started

Installs the necessary npm packages for using pdfme's UI components like the designer, forms, and viewers, along with common utilities.

```Shell
npm i @pdfme/ui @pdfme/common
```

--------------------------------

### Install @pdfme/schemas Package via npm

Source: https://pdfme.com/docs/getting-started/getting-started

This command shows how to install the `@pdfme/schemas` package using npm. This package provides access to additional built-in schema types beyond the default `text` type, enabling more diverse PDF content generation.

```npm
npm install @pdfme/schemas
```

--------------------------------

### pdfme UI Package API Reference

Source: https://pdfme.com/docs/getting-started/getting-started

API documentation for the @pdfme/ui package, including Designer, Form, and Viewer components for building interactive PDF applications.

```APIDOC
Package: @pdfme/ui
  Class: Designer
    Description: A UI component for designing PDF templates interactively.
  Class: Form
    Description: A UI component for filling out PDF forms based on a template.
  Class: Viewer
    Description: A UI component for viewing generated PDF documents.
```

--------------------------------

### pdfme Generator Package API Reference

Source: https://pdfme.com/docs/getting-started/getting-started

API documentation for the @pdfme/generator package, specifically the generate function used for creating PDFs.

```APIDOC
Package: @pdfme/generator
  Function: generate
    Description: Generates a PDF document based on a provided template and data.
```

--------------------------------

### Generate PDF Document from Template and Inputs in TypeScript

Source: https://pdfme.com/docs/getting-started/getting-started

This snippet demonstrates how to use the `generate` function from `@pdfme/generator` to create a PDF file. It takes a predefined `template` and an array of `inputs` as arguments. The example shows how to handle the generated PDF promise, including commented-out code for displaying the PDF in a browser or saving it to a file in Node.js.

```TypeScript
import type { Template } from '@pdfme/common';
import { generate } from '@pdfme/generator';

const template: Template = {
  // skip...　Check the Template section.
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

generate({ template, inputs }).then((pdf) => {
  console.log(pdf);

  // Browser
  // const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
  // window.open(URL.createObjectURL(blob));

  // Node.js
  // fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);
});
```

--------------------------------

### pdfme Common Package API Reference

Source: https://pdfme.com/docs/getting-started/getting-started

API documentation for the @pdfme/common package, detailing the Template type which is central to pdfme's functionality.

```APIDOC
Package: @pdfme/common
  Type: Template
    Description: The core data structure used throughout the pdfme library for defining PDF layouts and content. It consists of a fixed part (basePdf) and a variable part (schemas).
```

--------------------------------

### Create Template with Built-in and Custom Schema Types in TypeScript

Source: https://pdfme.com/docs/getting-started/getting-started

This example illustrates defining a PDF template that incorporates both built-in schema types like `text`, `image`, and `qrcode` from `@pdfme/schemas`, as well as a custom plugin. It demonstrates how to structure the template, define inputs, and use the `generate` function with a `plugins` object to create a PDF with varied content.

```TypeScript
import { Template, BLANK_PDF } from '@pdfme/common';
import { text, barcodes, image } from '@pdfme/schemas';
import myCustomPlugin from './custom-plugins';

const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    [
      {
        name: 'example_text',
        type: 'text',
        position: { x: 0, y: 0 },
        width: 40,
        height: 10,
      },
      {
        name: 'example_image',
        type: 'image',
        position: { x: 200, y: 200 },
        width: 60,
        height: 40,
      },
      {
        name: 'example_qr_code',
        type: 'qrcode',
        position: { x: 100, y: 100 },
        width: 50,
        height: 50,
      },
    ],
  ],
};

const plugins = {
  Text: multiVariableText,
  'QR Code': barcodes.qrcode,
  Image: image,
  MyCustomPlugin: myCustomPlugin,
};

const inputs = [
  {
    example_text: 'Hello, World!',
    example_image: 'data:image/png;base64,iVBORw0KG....',
    example_qr_code: 'https://pdfme.com/',
  },
];

generate({ template, inputs, plugins }).then((pdf) => {
  console.log(pdf);
});
```

--------------------------------

### pdfme Designer Instance Methods

Source: https://pdfme.com/docs/getting-started/getting-started

This section lists the available methods for manipulating the `Designer` instance after it has been initialized. These methods allow for saving, updating, retrieving, and handling changes to the template, as well as destroying the instance.

```APIDOC
Designer Instance Methods:
- saveTemplate()
- updateTemplate()
- getTemplate()
- onChangeTemplate()
- onSaveTemplate()
- destroy()
```

--------------------------------

### Import pdfme Generator Components

Source: https://pdfme.com/docs/getting-started/getting-started

Imports the Template type from @pdfme/common and the generate function from @pdfme/generator for PDF generation in a webpack environment.

```TypeScript
import type { Template } from '@pdfme/common';
import { generate } from '@pdfme/generator';
```

--------------------------------

### Import pdfme UI Components

Source: https://pdfme.com/docs/getting-started/getting-started

Imports the Template type from @pdfme/common and UI components (Designer, Form, Viewer) from @pdfme/ui for building PDF design and viewing applications in a webpack environment.

```TypeScript
import type { Template } from '@pdfme/common';
import { Designer, Form, Viewer } from '@pdfme/ui';
```

--------------------------------

### Generate PDF from Form Inputs

Source: https://pdfme.com/docs/getting-started/getting-started

This code demonstrates how to retrieve user inputs from the `Form` instance using `getInputs()` and then use these inputs along with a `template` to generate a PDF. The generated PDF is subsequently opened in a new browser window as a Blob.

```JavaScript
generate({ template, inputs: form.getInputs() }).then((pdf) => {
  const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
  window.open(URL.createObjectURL(blob));
});
```

--------------------------------

### Integrate pdfme Form Component

Source: https://pdfme.com/docs/getting-started/getting-started

This snippet shows how to instantiate the `Form` component from `@pdfme/ui` to create a UI for users to input data based on a template. It takes a DOM container, a `Template`, and an optional array of initial `inputs`.

```TypeScript
import type { Template } from '@pdfme/common';
import { Form } from '@pdfme/ui;

const domContainer = document.getElementById('container');
const template: Template = {
  // skip...
};
// This is initial data.
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

const form = new Form({ domContainer, template, inputs });
```

--------------------------------

### Integrate pdfme Designer Component

Source: https://pdfme.com/docs/getting-started/getting-started

This snippet demonstrates how to instantiate and integrate the `Designer` component from `@pdfme/ui` into a web page. It requires a DOM container element and a `Template` object to initialize the designer for editing PDF templates.

```TypeScript
import type { Template } from '@pdfme/common';
import { Designer } from '@pdfme/ui;

const domContainer = document.getElementById('container');
const template: Template = {
  // skip...　Check the Template section.
};

const designer = new Designer({ domContainer, template });
```

--------------------------------

### Integrate pdfme Viewer Component

Source: https://pdfme.com/docs/getting-started/getting-started

This snippet illustrates how to integrate the `Viewer` component from `@pdfme/ui`. Similar to the Form, it displays a preview of a PDF based on a `Template` and `inputs`, but without allowing user edits, making it suitable for display-only purposes.

```TypeScript
import type { Template } from '@pdfme/common';
import { Viewer } from '@pdfme/ui;

const domContainer = document.getElementById('container');
const template: Template = {
  // skip...
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

const viewer = new Viewer({ domContainer, template, inputs });
```

--------------------------------

### Create New Git Branch for Template Contribution

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

Command to create a new local Git branch dedicated to your template contribution. The example uses 'add-my-new-template' as the branch name, which should be descriptive of your template.

```bash
git checkout -b add-my-new-template
```

--------------------------------

### Clone Forked pdfme Repository

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

Instructions to clone your forked pdfme repository from GitHub to your local machine and navigate into the project directory. Replace 'YOUR-GITHUB-USERNAME' with your actual GitHub username.

```bash
git clone git@github.com:YOUR-GITHUB-USERNAME/pdfme.git
cd pdfme
```

--------------------------------

### Configure basePdf for Template with Dimensions

Source: https://pdfme.com/docs/getting-started/getting-started

Defines the basePdf property within a pdfme template using width, height, and padding, useful for creating empty PDFs or those requiring page breaks.

```JavaScript
basePdf: { "width": 210, "height": 297, "padding": [10, 10, 10, 10] }
```

--------------------------------

### Install @pdfme/manipulator Package

Source: https://pdfme.com/docs/getting-started/manipulator

This snippet shows the command to install the `@pdfme/manipulator` package using npm, making it available for use in your project.

```bash
npm install @pdfme/manipulator
```

--------------------------------

### Create Directory for New Template Assets

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

Command to create a new directory in kebab-case within the 'playground/public/template-assets' path. This directory will house your template's files and its name will be displayed on the Template List page.

```bash
mkdir -p playground/public/template-assets/my-new-template
```

--------------------------------

### Install @pdfme/converter Package

Source: https://pdfme.com/docs/getting-started/converter

This snippet shows the command to install the `@pdfme/converter` package using npm. This package provides functionalities for converting PDFs to images, retrieving page sizes, and converting images to PDFs.

```Bash
npm install @pdfme/converter
```

--------------------------------

### Define a Minimal pdfme Template in TypeScript

Source: https://pdfme.com/docs/getting-started/getting-started

This snippet demonstrates how to define a basic PDF template using the `@pdfme/common` library in TypeScript. It includes a `basePdf` and an array of `schemas`, each containing multiple text fields with defined positions and dimensions. This serves as a foundational structure for PDF generation.

```TypeScript
import { Template, BLANK_PDF } from '@pdfme/common';

const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    [
      {
        name: 'a',
        type: 'text',
        position: { x: 0, y: 0 },
        width: 10,
        height: 10,
      },
      {
        name: 'b',
        type: 'text',
        position: { x: 10, y: 10 },
        width: 10,
        height: 10,
      },
      {
        name: 'c',
        type: 'text',
        position: { x: 20, y: 20 },
        width: 10,
        height: 10,
      },
    ],
  ],
};
```

--------------------------------

### Install pdfme Schemas Package

Source: https://pdfme.com/docs/getting-started/custom-schemas

Installs the `@pdfme/schemas` package, which provides pre-built schemas like image and QR code for use with pdfme, enabling extended document generation capabilities.

```Shell
npm install @pdfme/schemas
```

--------------------------------

### Install node-canvas for PDF to Image Conversion

Source: https://pdfme.com/docs/getting-started/converter

This command installs `node-canvas`, a dependency required for the `pdf2img` function when running in a Node.js environment. It's essential for image processing capabilities and should be installed with a compatible version.

```Bash
npm install canvas@^2.11.2
```

--------------------------------

### Push Local Branch to GitHub

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

Command to push your newly created local branch, containing the template changes, to your remote GitHub repository. This makes your changes available for creating a pull request.

```bash
git push origin add-my-new-template
```

--------------------------------

### Install Lightweight QR Code Plugin Dependency

Source: https://pdfme.com/docs/getting-started/custom-schemas

Installs the 'qrcode' npm package, which is a required dependency for the lightweight QR code plugin. This command adds the package to your project's dependencies, making it available for use in your pdfme application.

```Shell
npm install qrcode -S
```

--------------------------------

### Stage and Commit Template Changes

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

Commands to stage all modified and new files in your local Git repository and then commit them with a descriptive message. The commit message should clearly indicate the addition of a new template.

```bash
git add .
git commit -m "feat: Add My New Template"
```

--------------------------------

### Example Font Configuration Object

Source: https://pdfme.com/docs/getting-started/custom-fonts

Illustrates how to define a `Font` object with multiple font entries. It shows how to specify font data using URLs and how to designate a fallback font.

```TypeScript
const font: Font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  }
};
```

--------------------------------

### Convert PDF Pages to Images using pdf2img

Source: https://pdfme.com/docs/getting-started/converter

This example demonstrates how to use the `pdf2img` function from `@pdfme/converter` to convert a PDF `ArrayBuffer` into an array of images (PNG in this case). It allows specifying image type, scale, and a specific page range for conversion.

```TypeScript
import { pdf2img } from '@pdfme/converter';

const pdf = new ArrayBuffer(...); // Source PDF
const images = await pdf2img(pdf, {
  imageType: 'png',
  scale: 1,
  range: { start: 0, end: 1 }
});
```

--------------------------------

### Integrate PDFme Table Schema with Designer and Generator

Source: https://pdfme.com/docs/getting-started/tables

This snippet demonstrates how to import the `table` schema from `@pdfme/schemas` and integrate it as a plugin into both `@pdfme/ui`'s `Designer` component for UI rendering and `@pdfme/generator` for PDF generation. It shows the basic setup required to enable table functionality within PDFme applications.

```javascript
import { table } from '@pdfme/schemas';
import { Designer } from '@pdfme/ui';
import { generate } from '@pdfme/generator';

new Designer({
  domContainer,
  template,
  plugins: { Table: table }
});

generate({
  template,
  inputs,
  plugins: { Table: table }
});
```

--------------------------------

### Convert Multiple Images to a Single PDF using img2pdf

Source: https://pdfme.com/docs/getting-started/converter

This example shows how to use the `img2pdf` function to combine one or more image `ArrayBuffer`s into a single PDF document. It supports various options for scaling, output image type, page size in millimeters, and margins.

```TypeScript
import { img2pdf } from '@pdfme/converter';

const image1 = new ArrayBuffer(...); // First image
const image2 = new ArrayBuffer(...); // Second image
const pdf = await img2pdf([image1, image2], {
  scale: 1,
  imageType: 'jpeg',
  size: { width: 210, height: 297 },
  margin: [10, 10, 10, 10]
});
```

--------------------------------

### Add Author Field to template.json

Source: https://pdfme.com/docs/getting-started/template-contribution-guide

An optional step to add an 'author' field to your 'template.json' file, crediting your GitHub username for the template. This JSON snippet shows where to insert the field.

```json
{
  "author": "YOUR-GITHUB-USERNAME",
  "basePdf": ...
}
```

--------------------------------

### Update Fonts in pdfme Designer using updateOptions

Source: https://pdfme.com/docs/getting-started/custom-fonts

This example illustrates how to dynamically update the font settings of an existing pdfme Designer instance using the `updateOptions` method. It shows how to modify font data and fallback properties after initialization, affecting the rendering of text within the UI.

```javascript
const font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
    fallback: true,
  },
};
designer.updateOptions({ font });
```

--------------------------------

### Retrieve PDF Page Dimensions using pdf2size

Source: https://pdfme.com/docs/getting-started/converter

This snippet illustrates how to use the `pdf2size` function to get the width and height of each page in a PDF. It takes a PDF `ArrayBuffer` and an optional scale factor, returning an array of objects with the dimensions for each page.

```TypeScript
import { pdf2size } from '@pdfme/converter';

const pdf = new ArrayBuffer(...); // Source PDF
const sizes = await pdf2size(pdf, {
  scale: 1 // Scale factor (default: 1)
});
// sizes: Array<{ width: number, height: number }>
```

--------------------------------

### Configure UI Language and Custom Labels in pdfme

Source: https://pdfme.com/docs/getting-started/custom-ui

This example shows how to change the display language of the pdfme UI and override default labels with custom text. It sets the language to Japanese and provides custom labels for specific UI elements.

```JavaScript
new Designer({
  domContainer,
  template,
  options: {
    lang: 'ja',
    labels: {
      fieldsList: '入力項目一覧ビュー', // override the label for the edit button
      youCanCreateYourOwnLabel: '独自のラベルを作成できます', // add a new label for the custom plugin
    },
  },
});
```

--------------------------------

### Dynamic Table Content Input for PDFme Generator

Source: https://pdfme.com/docs/getting-started/tables

This JSON array provides an example of how to dynamically change the content of a table in a PDFme generated document. By providing a different 2D array for the 'mytable' key, new rows can be added to the table, showcasing the flexibility of the generator's input.

```json
[
  {
    "mytable": [
      ["Alice", "New York", "Alice is a freelance web designer and developer"],
      ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
      ["Charlie", "London", "Charlie is a freelance photographer"]
    ]
  }
]
```

--------------------------------

### Initialize PDFme Designer with Custom Schemas

Source: https://pdfme.com/docs/getting-started/custom-schemas

Shows how to integrate custom schemas (text, image, qrcode) from `@pdfme/schemas` into the `@pdfme/ui` Designer component. This enables the Designer to correctly render and allow manipulation of templates that utilize these extended schema types.

```TypeScript
import type { Template } from '@pdfme/common';
import { text, image, barcodes } from '@pdfme/schemas';
import { Designer } from '@pdfme/ui';

const domContainer = document.getElementById('container');
const template: Template = {
  // skip... you can use text, image, qrcode schema type in template.
};

const designer = new Designer({
  domContainer,
  template,
  // ↓ You can use plugins in Designer like this.
  plugins: {
    text,
    image,
    qrcode: barcodes.qrcode,
  },
});
```

--------------------------------

### Merge Multiple PDFs using @pdfme/manipulator

Source: https://pdfme.com/docs/getting-started/manipulator

Demonstrates how to combine multiple PDF files (represented as ArrayBuffer) into a single PDF using the `merge` function from `@pdfme/manipulator`. It takes an array of PDF ArrayBuffers as input and returns a Promise that resolves with the merged PDF ArrayBuffer.

```javascript
import { merge } from '@pdfme/manipulator';

const pdf1 = new ArrayBuffer(...); // First PDF
const pdf2 = new ArrayBuffer(...); // Second PDF
const merged = await merge([pdf1, pdf2]);
```

--------------------------------

### Integrate Lightweight QR Code Plugin into pdfme Generator

Source: https://pdfme.com/docs/getting-started/custom-schemas

This JavaScript snippet demonstrates how to import the custom QR code plugin and integrate it into the pdfme 'generate' function. By mapping the plugin to a specific key ('NodeQRCode') within the 'plugins' option, it becomes available for use in your PDF templates.

```JavaScript
import qrCode from "./plugins/qrCode.js";

// In your generator
const pdf = await generate({
  template,
  inputs,
  options: { font },
  plugins: {
    // Your other plugins
    NodeQRCode: qrCode
  }
});
```

--------------------------------

### API Reference for @pdfme/converter Module Types

Source: https://pdfme.com/docs/getting-started/converter

This section provides the TypeScript type definitions for the `@pdfme/converter` module. It defines interfaces for `ImageType`, `PageRange`, `Pdf2ImgOptions`, `Pdf2SizeOptions`, and `Img2PdfOptions`, detailing the structure of parameters used in the conversion functions.

```APIDOC
type ImageType = 'jpeg' | 'png';

interface PageRange {
  start?: number;
  end?: number;
}

interface Pdf2ImgOptions {
  scale?: number;
  imageType?: ImageType;
  range?: PageRange;
}

interface Pdf2SizeOptions {
  scale?: number;
}

interface Img2PdfOptions {
  scale?: number;
  imageType?: ImageType;
  size?: { height: number, width: number }; // in millimeters
  margin?: [number, number, number, number]; // in millimeters [top, right, bottom, left]
}
```

--------------------------------

### Type Definitions for @pdfme/manipulator

Source: https://pdfme.com/docs/getting-started/manipulator

Defines the TypeScript types used within the `@pdfme/manipulator` package, including `PDFInput`, `PageRange`, `InsertOperation`, and `OrganizeAction`. These types specify the expected structure of inputs for various manipulation functions.

```APIDOC
type PDFInput = ArrayBuffer;

interface PageRange {
  start?: number;
  end?: number;
}

interface InsertOperation {
  pdf: PDFInput;
  position: number;
}

type OrganizeAction =
  | { type: 'remove'; data: { position: number } }
  | { type: 'insert'; data: { pdf: PDFInput; position: number } }
  | { type: 'replace'; data: { pdf: PDFInput; position: number } }
  | { type: 'rotate'; data: { position: number; degrees: 0 | 90 | 180 | 270 | 360 } }
  | { type: 'move'; data: { from: number; to: number } };
```

--------------------------------

### pdfme Schema Element: Select

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering a select (dropdown) field in pdfme, including options and styling.

```APIDOC
Select (select) schema element:
  Properties:
    - Options (values for the select field)
  Style-related properties:
    - Font Name
    - Font Size
    - Letter Spacing
    - Text Align
    - Vertical Align
    - Line Height
    - Text Color
    - Background Color
```

--------------------------------

### Insert Pages into a PDF

Source: https://pdfme.com/docs/getting-started/manipulator

Demonstrates how to insert pages from one PDF into another at a specified position using the `insert` function. It takes a base PDF and an array of objects, each specifying the PDF to insert and the target position. The function returns the resulting PDF ArrayBuffer.

```javascript
import { insert } from '@pdfme/manipulator';

const basePdf = new ArrayBuffer(...); // Base PDF
const insertPdf = new ArrayBuffer(...); // PDF to insert
const result = await insert(basePdf, [
  { pdf: insertPdf, position: 1 } // Insert after first page
]);
```

--------------------------------

### Perform Multiple PDF Operations Sequentially

Source: https://pdfme.com/docs/getting-started/manipulator

Demonstrates the `organize` function, which allows performing a sequence of PDF manipulation operations (remove, insert, rotate, move, replace) on a single PDF. It takes the source PDF and an array of action objects, each defining a `type` and `data` for the operation. The function returns the final modified PDF ArrayBuffer.

```javascript
import { organize } from '@pdfme/manipulator';

const pdf = new ArrayBuffer(...); // Source PDF
const insertPdf = new ArrayBuffer(...); // PDF to insert
const result = await organize(pdf, [
  { type: 'remove', data: { position: 1 } },
  { type: 'insert', data: { pdf: insertPdf, position: 0 } },
  { type: 'rotate', data: { position: 0, degrees: 90 } }
]);
```

--------------------------------

### Split PDF into Multiple Documents

Source: https://pdfme.com/docs/getting-started/manipulator

Illustrates how to split a source PDF (ArrayBuffer) into multiple smaller PDFs based on specified page ranges using the `split` function. The function takes the source PDF and an array of page range objects, returning an array of new PDF ArrayBuffers.

```javascript
import { split } from '@pdfme/manipulator';

const pdf = new ArrayBuffer(...); // Source PDF
const splits = await split(pdf, [
  { start: 0, end: 1 }, // Pages 1-2
  { start: 2, end: 4 }, // Pages 3-5
]);
```

--------------------------------

### Generate PDF with Custom Schemas using @pdfme/generator

Source: https://pdfme.com/docs/getting-started/custom-schemas

Demonstrates how to import and register custom schemas (text, image, qrcode) from `@pdfme/schemas` when generating a PDF using `@pdfme/generator`. This allows the generator to correctly process templates that include these specific schema types.

```TypeScript
import type { Template } from '@pdfme/common';
import { text, image, barcodes } from '@pdfme/schemas';
import { generate } from '@pdfme/generator';

const template: Template = {
  // skip... you can use text, image, qrcode schema type in template.
};
const inputs = [
  // skip...
];

const pdf = await generate({
  template,
  inputs,
  // ↓ You can use plugins in Generator like this.
  plugins: {
    text,
    image,
    qrcode: barcodes.qrcode,
  },
});
```

--------------------------------

### Initialize pdfme Designer with Custom Fonts

Source: https://pdfme.com/docs/getting-started/custom-fonts

This snippet demonstrates how to initialize the pdfme Designer UI component, passing custom font configurations as part of the options. It shows how to define font data URLs and specify fallback behavior for individual fonts.

```javascript
import { Designer } from '@pdfme/ui';

const domContainer = document.getElementById('container');
const template = {
  // skip...
};
const font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  },
};

const designer = new Designer({ domContainer, template, options: { font } });
```

--------------------------------

### Configure Static Footer Elements in pdfme Template

Source: https://pdfme.com/docs/getting-started/headers-and-footers

This JSON configuration defines a `basePdf` with `staticSchema` to place a horizontal line, dynamic invoice information, and page numbers as a footer. It demonstrates how to use variables like `{info.InvoiceNo}`, `{totalInput}`, `{currentPage}`, and `{totalPages}` within the content of text schemas. These variables are populated from the `input` data provided to the pdfme engine, ensuring that these static elements remain fixed across all pages, even with dynamic content.

```JSON
{
  "width": 210,
  "height": 297,
  "padding": [20, 20, 20, 20],
  "staticSchema": [
    {
      "name": "line",
      "type": "line",
      "position": {
        "x": 20,
        "y": 279
      },
      "width": 170,
      "height": 0.2,
      "rotate": 0,
      "opacity": 1,
      "color": "#999999",
      "required": false,
      "readOnly": true,
      "content": ""
    },
    {
      "name": "footerInfo",
      "type": "text",
      "content": "Invoice No.{info.InvoiceNo} • {totalInput} USD due {date}",
      "position": {
        "x": 20,
        "y": 282
      },
      "width": 122.51,
      "height": 10,
      "rotate": 0,
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "opacity": 1,
      "strikethrough": false,
      "underline": false,
      "required": false,
      "readOnly": true
    },
    {
      "name": "pageNumber",
      "type": "text",
      "content": "Page {currentPage} of {totalPages}",
      "position": {
        "x": 145,
        "y": 282
      },
      "width": 45,
      "height": 10,
      "rotate": 0,
      "alignment": "right",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "opacity": 1,
      "strikethrough": false,
      "underline": false,
      "required": false,
      "readOnly": true
    }
  ]
}
```

--------------------------------

### pdfme Schema Element: Table

Source: https://pdfme.com/docs/getting-started/supported-features

Defines extensive style and layout properties for rendering dynamic tables in pdfme documents.

```APIDOC
Table (table) schema element:
  Table Style-related properties:
    - Border Width
    - Border Color
  Header / Body Style-related properties:
    - Font Name
    - Font Size
    - Letter Spacing
    - Text Align
    - Vertical Align
    - Line Height
    - Text Color
    - Border Color
    - Background Color
    - Border Width
    - Padding
  Column Style-related properties:
    - Text Align
```

--------------------------------

### pdfme Schema Elements: Date, Time, DateTime

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering date, time, and datetime fields in pdfme, including format and styling.

```APIDOC
Date (date) / Time (time) / DateTime (dateTime) schema elements:
  Properties:
    - Date Format
  Style-related properties:
    - Font Name
    - Font Size
    - Letter Spacing
    - Text Align
    - Text Color
    - Background Color
```

--------------------------------

### Calculate Values Using pdfme Expressions

Source: https://pdfme.com/docs/getting-started/expression

Illustrates common expression patterns for calculating financial values like subtotal, tax, and total within pdfme documents, demonstrating usage of array reduction, type conversion, and variable references.

```JavaScript
subtotal: '{orders.reduce((sum, item) => sum + parseFloat(item[1] || 0) * parseFloat(item[2] || 0), 0)}'
tax: '{Number(subtotalInput) * Number(tax.rate) / 100}'
total: '${Number(subtotal) + Number(tax)}'
```

--------------------------------

### PDFme Template Configuration with Table Schema

Source: https://pdfme.com/docs/getting-started/tables

This JSON snippet illustrates a complete PDFme template configuration that includes a 'table' type schema. It defines the table's position, dimensions, initial content, and extensive styling options for both header and body, along with `basePdf` settings for page breaks.

```json
{
  "schemas": [
    [
      {
        "name": "mytable",
        "type": "table",
        "position": {
          "x": 28.92,
          "y": 51.36
        },
        "width": 150,
        "height": 57.5184,
        "content": "[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]",
        "showHead": true,
        "head": ["Name", "City", "Description"],
        "headWidthPercentages": [30, 30, 40],
        "tableStyles": {
          "borderWidth": 0.3,
          "borderColor": "#000000"
        },
        "headStyles": {
          "fontName": "NotoSerifJP-Regular",
          "fontSize": 13,
          "characterSpacing": 0,
          "alignment": "left",
          "verticalAlignment": "middle",
          "lineHeight": 1,
          "fontColor": "#ffffff",
          "borderColor": "",
          "backgroundColor": "#2980ba",
          "borderWidth": {
            "top": 0,
            "right": 0,
            "bottom": 0,
            "left": 0
          },
          "padding": {
            "top": 5,
            "right": 5,
            "bottom": 5,
            "left": 5
          }
        },
        "bodyStyles": {
          "fontName": "NotoSerifJP-Regular",
          "fontSize": 13,
          "characterSpacing": 0,
          "alignment": "left",
          "verticalAlignment": "middle",
          "lineHeight": 1,
          "fontColor": "#000000",
          "borderColor": "#888888",
          "backgroundColor": "",
          "alternateBackgroundColor": "#f5f5f5",
          "borderWidth": {
            "top": 0.1,
            "right": 0.1,
            "bottom": 0.1,
            "left": 0.1
          },
          "padding": {
            "top": 5,
            "right": 5,
            "bottom": 5,
            "left": 5
          }
        },
        "columnStyles": {},
        "required": false,
        "readOnly": false
      }
    ]
  ],
  "basePdf": {
    "width": 210,
    "height": 297,
    "padding": [20, 20, 20, 20]
  },
  "pdfmeVersion": "5.0.0"
}
```

--------------------------------

### Customize UI Theme with Ant Design in pdfme

Source: https://pdfme.com/docs/getting-started/custom-ui

This code snippet demonstrates how to apply a custom theme to the pdfme UI components (e.g., Designer) using Ant Design's theme configuration. It sets the primary color of the UI elements.

```JavaScript
new Designer({
  domContainer,
  template,
  options: {
    theme: {
      token: {
        colorPrimary: 'red',
      },
    },
  },
});
```

--------------------------------

### pdfme Schema Element: Multivariable Text

Source: https://pdfme.com/docs/getting-started/supported-features

Extends the Text schema to support 0 to n variables within a single text field, inheriting all Text properties.

```APIDOC
Multivariable Text (multiVariableText) schema element:
  - Inherits all properties from 'Text' schema.
  - Supports 0 to n variables in a single text field.
```

--------------------------------

### Customize Schema Labels in PDFme Plugins

Source: https://pdfme.com/docs/getting-started/custom-schemas

Illustrates how to rename or reorder schema labels within the `plugins` configuration object. This allows for custom display names, such as 'QR' instead of 'qrcode' or 'Image' instead of 'image', improving user interface clarity.

```TypeScript
  plugins: {
    QR: barcodes.qrcode,
    Image: image,
  },

```

--------------------------------

### Lightweight QR Code Plugin Schema Definition

Source: https://pdfme.com/docs/getting-started/custom-schemas

This JSON object defines the schema structure for using the lightweight QR code plugin within a pdfme template. It specifies properties such as the content to be encoded, position, background and bar colors, dimensions, rotation, opacity, and other rendering options for the QR code.

```JSON
{
  "type": "node-qrCode",
  "content": "https://pdfme.com/",
  "position": { "x": 178, "y": 20 },
  "backgroundColor": "#ffffff",
  "barColor": "#000000",
  "width": 16,
  "height": 16,
  "rotate": 0,
  "opacity": 1,
  "required": false,
  "readOnly": false,
  "name": "qrCode"
}
```

--------------------------------

### pdfme Schema Element: Text

Source: https://pdfme.com/docs/getting-started/supported-features

Defines the properties and styles supported for rendering single-line or multi-line text fields in pdfme documents.

```APIDOC
Text (text) schema element:
  Style-related properties:
    - Font Size
    - Letter Spacing
    - Text Align
    - Vertical Align
    - Line Height
    - Text Color
    - Background Color
    - Underline
    - Strikethrough
  Font-related properties:
    - TrueType fonts (TTF & TTC)
    - OpenType fonts with PostScript or TrueType outlines (TTF, OTF, & OTC)
    - Support for CJK (Chinese, Japanese, Korean) fonts
    - Embedding and subsetting of fonts
    - Support for multiple fonts and fallback fonts
    - Dynamic Font Sizing:
      - Detailed options for Min, Max, Fit
```

--------------------------------

### pdfme Planned Feature: HyperLink

Source: https://pdfme.com/docs/getting-started/supported-features

Future planned feature for pdfme to support hyperlinks within generated documents.

```APIDOC
Planned Feature:
  - HyperLink (https://github.com/pdfme/pdfme/issues/319)
```

--------------------------------

### PDFme Generator Input for Table Content

Source: https://pdfme.com/docs/getting-started/tables

This JSON array demonstrates the expected input format for the `@pdfme/generator` when populating a table schema. It maps the table's `name` (e.g., 'mytable') to a 2D array of data, which will be rendered as the table's content in the generated PDF.

```json
[
  {
    "mytable": [
      ["Alice", "New York", "Alice is a freelance web designer and developer"],
      ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"]
    ]
  }
]
```

--------------------------------

### pdfme Schema Element: Barcode

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties and supported types for rendering various barcode formats in pdfme documents.

```APIDOC
Barcode schema element:
  Supported Types:
    - qrcode
    - japanpost
    - ean13
    - ean8
    - code39
    - code128
    - nw7
    - itf14
    - upca
    - upce
    - gs1datamatrix
    - pdf417
  Style-related properties:
    - Bar Color
    - Background Color
    - Text Color
    - Include text option (planned support)
```

--------------------------------

### Generate PDF with Custom Fonts using @pdfme/generator

Source: https://pdfme.com/docs/getting-started/custom-fonts

Demonstrates how to integrate custom fonts when generating a PDF using `@pdfme/generator`. This snippet covers importing necessary modules, defining a font configuration, creating a template with specified font names, and passing the font object to the `generate` function's options.

```TypeScript
import { Template, BLANK_PDF, Font } from '@pdfme/common';
import { generate } from '@pdfme/generator';

const font: Font = {
  serif: {
    data: 'https://example.com/fonts/serif.ttf',
    fallback: true,
  },
  sans_serif: {
    data: 'https://example.com/fonts/sans_serif.ttf',
  },
};
const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    [
      {
        name: 'a',
        type: 'text',
        fontName: 'serif',
        position: { x: 0, y: 0 },
        width: 10,
        height: 10,
      },
      {
        name: 'b',
        type: 'text',
        fontName: 'sans_serif',
        position: { x: 10, y: 10 },
        width: 10,
        height: 10,
      },
      {
        // <- use fallback font. (serif)
        name: 'c',
        type: 'text',
        position: { x: 20, y: 20 },
        width: 10,
        height: 10,
      },
    ],
  ],
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];

generate({ template, inputs, options: { font } }).then((pdf) => {
  console.log(pdf);

  // Browser
  // const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
  // window.open(URL.createObjectURL(blob));

  // Node.js
  // fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);
});
```

--------------------------------

### Move a Page within a PDF

Source: https://pdfme.com/docs/getting-started/manipulator

Shows how to change the position of a single page within a PDF using the `move` function. It takes the source PDF and an object specifying the `from` (current) and `to` (new) 0-indexed positions of the page. The function returns the reordered PDF as an ArrayBuffer.

```javascript
import { move } from '@pdfme/manipulator';

const pdf = new ArrayBuffer(...); // Source PDF
const result = await move(pdf, { from: 0, to: 2 }); // Move first page to third position
```

--------------------------------

### pdfme Schema Elements: Radio Button, Check Box

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering radio button groups and individual checkboxes in pdfme documents.

```APIDOC
Radio Button (radioGroup) / Check Box (checkbox) schema elements:
  Style-related properties:
    - Color
```

--------------------------------

### pdfme Expression Engine Available Variables

Source: https://pdfme.com/docs/getting-started/expression

Lists the types of variables accessible within pdfme expressions, including user input values from specific field types, evaluated values of other `readOnly` fields, and embedded system variables like page numbers and dates.

```APIDOC
Variables That Can Be Used Within Expressions:
- User Input Values: Values entered in Multivariable Text or Table fields that can be parsed as JSON.
- Values of Other `readOnly` Fields: If an expression is used in the value of another `readOnly` field, the value after the expression is evaluated is used.
- Embedded Variables:
  + `currentPage`
  + `totalPages`
  + `date (YYYY/MM/DD)`
  + `dateTime (YYYY/MM/DD HH:mm)`
```

--------------------------------

### pdfme Expression Engine Limitations and Security

Source: https://pdfme.com/docs/getting-started/expression

Defines the security constraints and allowed global objects and functions within pdfme expressions, prohibiting `eval` and `prototype` and limiting available JavaScript features for safe execution.

```APIDOC
Limitations and Security of Expressions:
- Only Arrow Functions are supported.
- The `eval` function cannot be used.
- `prototype` cannot be used.
- Only the following global objects and their methods can be used:
  + Math
  + String
  + Number
  + Boolean
  + Array
  + Object
  + Date
  + JSON
  + isNaN
  + parseFloat
  + parseInt
  + decodeURI
  + decodeURIComponent
  + encodeURI
  + encodeURIComponent
```

--------------------------------

### pdfme Schema Element: Image Graphic

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for embedding image graphics in pdfme documents.

```APIDOC
Image (image) schema element:
  Supported Formats:
    - JPEG
    - PNG
    - PDF (embed pdf inside pdf)
```

--------------------------------

### pdfme Schema Element: Line Shape

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering a line shape in pdfme documents.

```APIDOC
Line (line) schema element:
  Style-related properties:
    - Color
```

--------------------------------

### Import Font Type from @pdfme/common

Source: https://pdfme.com/docs/getting-started/custom-fonts

Imports the `Font` type definition from the `@pdfme/common` package, which is essential for type-checking custom font configurations in pdfme.

```TypeScript
import type { Font } from '@pdfme/common';
```

--------------------------------

### pdfme Schema Element: SVG Graphic

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for embedding SVG graphics in pdfme documents.

```APIDOC
SVG (svg) schema element:
  - No specific style properties listed, implies direct SVG embedding.
```

--------------------------------

### APIDOC: Font Type Structure

Source: https://pdfme.com/docs/getting-started/custom-fonts

Defines the `Font` type, an object where keys are font names and values are objects containing font data, with optional `fallback` and `subset` properties. `data` can be a URL string or binary data. `fallback` indicates the default font if not specified, and `subset` controls font embedding.

```APIDOC
type Font = {
  [fontName: string]: {
    data: string | Uint8Array | ArrayBuffer;
    fallback?: boolean;
    subset?: boolean;
  };
};
```

--------------------------------

### pdfme Schema Element: Rectangle Shape

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering a rectangle shape in pdfme documents.

```APIDOC
Rectangle (rectangle) schema element:
  Style-related properties:
    - Border Width
    - Border Color
    - Color
```

--------------------------------

### Define pdfme Template with Dynamic Expression

Source: https://pdfme.com/docs/getting-started/expression

This JSON snippet illustrates how to define a pdfme template where the content of one field (`field2`) is dynamically generated by an expression that references the value of another field (`field1`). The `readOnly` property for `field2` is set to `true`, indicating that its content is derived from the expression and cannot be directly edited by the user.

```json
{
    "schemas": [
        [
            {
                "name": "field1",
                "type": "text",
                "content": "Hello world",
                "readOnly": false
            },
            {
                "name": "field2",
                "type": "text",
                "content": "{field1} !",
                "readOnly": true
            }
        ]
    ],
    "basePdf": { "width": 210, "height": 297, "padding": [20, 10, 20, 10] },
    "pdfmeVersion": "5.0.0"
}
```

--------------------------------

### Rotate PDF Pages

Source: https://pdfme.com/docs/getting-started/manipulator

Shows how to rotate pages within a PDF using the `rotate` function. It can rotate all pages by a specified degree (e.g., 90) or target specific pages by providing an array of page indices. The function returns the modified PDF as an ArrayBuffer.

```javascript
import { rotate } from '@pdfme/manipulator';

const pdf = new ArrayBuffer(...); // Source PDF
const result = await rotate(pdf, 90); // Rotate all pages 90 degrees
// Or rotate specific pages:
const result2 = await rotate(pdf, 90, [0, 2]); // Rotate pages 1 and 3
```

--------------------------------

### pdfme Schema Element: Ellipse Shape

Source: https://pdfme.com/docs/getting-started/supported-features

Defines properties for rendering an ellipse shape in pdfme documents.

```APIDOC
Ellipse (ellipse) schema element:
  Style-related properties:
    - Border Width
    - Border Color
    - Color
```
Tokens:
Raw