### Install pdfme UI Packages
Source: https://pdfme.com/docs/getting-started
Install packages for using the PDF designer, forms, and viewers. `@pdfme/common` is required.
```bash
npm i @pdfme/ui @pdfme/common
```
--------------------------------
### Install pdfme Generator Package
Source: https://pdfme.com/docs/getting-started
Install the package for generating PDFs. You must also install `@pdfme/common`.
```bash
npm i @pdfme/generator @pdfme/common
```
--------------------------------
### Install QR Code Dependency
Source: https://pdfme.com/docs/custom-schemas
Install the 'qrcode' npm package to use the lightweight QR code plugin.
```bash
npm install qrcode -S
```
--------------------------------
### Example Font Registration
Source: https://pdfme.com/docs/custom-fonts
Demonstrates how to register custom fonts, specifying their data source (URL) and setting one as 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',
},
};
```
--------------------------------
### Generate PDF with pdfme
Source: https://pdfme.com/docs/getting-started
Use the generate function to create a PDF file from a template and input data. This example shows basic usage for both browser and Node.js environments.
```javascript
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);
});
```
--------------------------------
### Simple Expression Example
Source: https://pdfme.com/docs/expression
Demonstrates a basic arithmetic expression that evaluates to a number. This can be used for simple calculations within your PDF content.
```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"
}
```
--------------------------------
### Override Default Schema with Plugins
Source: https://pdfme.com/docs/custom-schemas
Use plugins to override default schemas for actions like removing text, replacing it with custom schemas, or renaming labels. This example shows how to integrate QR code and Image plugins.
```javascript
plugins: {
QR: barcodes.qrcode,
Image: image,
}
```
--------------------------------
### Text Schema Implementation in @pdfme/schemas
Source: https://pdfme.com/docs/custom-schemas
This is an example of the text schema, noted as the most complex for PDF rendering. It also demonstrates custom property panel editing using form-render's Widget.
```typescript
import { SchemaContainer } from "@pdfme/schemas";
const text: SchemaContainer = {
type: "Text",
// ... other properties
};
export default text;
```
--------------------------------
### Customize UI Theme with Ant Design Tokens
Source: https://pdfme.com/docs/custom-ui
Apply Ant Design themes to pdfme UI by modifying theme tokens. This example sets the primary color to red.
```javascript
new Designer({
domContainer,
template,
options: {
theme: {
token: {
colorPrimary: 'red',
},
},
},
});
```
--------------------------------
### Create New Branch for Template
Source: https://pdfme.com/docs/template-contribution-guide
Create a new branch in your local repository to work on your template contribution. The branch name should be descriptive, for example, 'add-my-new-template'.
```bash
git checkout -b add-my-new-template
```
--------------------------------
### Image Schema Implementation in @pdfme/schemas
Source: https://pdfme.com/docs/custom-schemas
A simple implementation for PDF rendering of images. It uses an input type="file" for image selection in the UI modes (form and designer) and serves as a good starting point for custom schemas.
```typescript
import { SchemaContainer } from "@pdfme/schemas";
const image: SchemaContainer = {
type: "Image",
// ... other properties
};
export default image;
```
--------------------------------
### Example of a Footer in a PDF Template
Source: https://pdfme.com/docs/headers-and-footers
This JSON configuration defines a footer for an invoice template. It includes a horizontal line and text elements for invoice details and page numbering, all positioned to appear at the bottom of each page.
```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
}
]
}
```
--------------------------------
### Change UI Language and Override Labels
Source: https://pdfme.com/docs/custom-ui
Customize the UI language and specific labels. This example sets the language to Japanese and overrides a label for the input fields list.
```javascript
new Designer({
domContainer,
template,
options: {
lang: 'ja',
labels: {
fieldsList: '入力項目一覧ビュー',
youCanCreateYourOwnLabel: '独自のラベルを作成できます',
},
},
});
```
--------------------------------
### Using Built-in and Custom Schema Types
Source: https://pdfme.com/docs/getting-started
Demonstrates creating a template that includes built-in schema types like text, image, and QR code, along with a custom plugin. Ensure all required plugins are explicitly imported.
```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);
});
```
--------------------------------
### Add and Commit Changes
Source: https://pdfme.com/docs/template-contribution-guide
Stage all changes and commit them with a descriptive message indicating the addition of a new template.
```bash
git add .
git commit -m "feat: Add My New Template"
```
--------------------------------
### Create Template Directory
Source: https://pdfme.com/docs/template-contribution-guide
Use this command to create a new directory for your template in kebab-case. The directory name will be used to display the template title in the playground.
```bash
mkdir -p playground/public/template-assets/my-new-template
```
--------------------------------
### Regenerate Gallery Metadata
Source: https://pdfme.com/docs/template-contribution-guide
Run this command after adding template files to update the template manifest used by the playground and CLI.
```bash
npm --prefix playground run generate-template-assets
```
--------------------------------
### Add Template Metadata
Source: https://pdfme.com/docs/template-contribution-guide
Create a metadata.json file in your template directory to describe the template and its tags for filtering in the gallery.
```json
{
"description": "A short description of what this template is useful for.",
"tags": ["Invoice", "Business"]
}
```
--------------------------------
### Clone pdfme Repository
Source: https://pdfme.com/docs/template-contribution-guide
Clone the pdfme repository to your local machine after forking it. Replace YOUR-GITHUB-USERNAME with your actual GitHub username.
```bash
git clone git@github.com:YOUR-GITHUB-USERNAME/pdfme.git
cd pdfme
```
--------------------------------
### Import and Use Lightweight QR Code Plugin
Source: https://pdfme.com/docs/custom-schemas
Import the custom QR code plugin and include it in the plugins object when generating a PDF.
```typescript
import qrCode from "./plugins/qrCode.js"; // In your generator
const pdf = await generate({
template,
inputs,
options: { font },
plugins: {
// Your other plugins
NodeQRCode: qrCode
}
});
```
--------------------------------
### Importing Schemas for UI Components
Source: https://pdfme.com/docs/custom-schemas
Integrate text, image, signature, and QR code schemas from '@pdfme/schemas' into pdfme UI components like the Designer. Load these schemas via the 'plugins' option during component initialization.
```javascript
import type { Template } from '@pdfme/common';
import { text, image, signature, barcodes } from '@pdfme/schemas';
import { Designer } from '@pdfme/ui';
const domContainer = document.getElementById('container');
const template: Template = {
// skip... you can use text, image, signature, qrcode schema type in template.
};
const designer = new Designer({
domContainer,
template,
// ↓ You can use plugins in Designer like this.
plugins: {
text,
image,
signature,
qrcode: barcodes.qrcode,
},
});
```
--------------------------------
### Generate PDF using API
Source: https://app.pdfme.com/
This snippet shows how to make a POST request to the PDF Generation API to create a PDF. Ensure you replace 'your_api_key_here' with your actual API key and specify the correct template ID.
```javascript
const handlePDFGeneration = async (e) => {
e.preventDefault();
const response = await fetch('https://api.pdfme.com/v1/pdf', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-KEY': 'your_api_key_here',
},
body: JSON.stringify({
inputs: userInputs,
template: '7aba5640-ea8a-11e...'
})
});
const blob = await response.blob();
setPdfUrl(URL.createObjectURL(blob));
};
return (
Generate PDF
);
```
--------------------------------
### Initialize and Update UI Options
Source: https://pdfme.com/docs/custom-ui
Control UI states like zoom level and sidebar visibility during initialization or update them after the component has been created. This applies to Designer, Form, and Viewer.
```javascript
// Initialize with specific states (also works for Form and Viewer):
const designer = new Designer({
domContainer,
template,
options: {
zoomLevel: 1.5,
sidebarOpen: false, // (Designer only)
}
});
// Update states after initialization:
designer.updateOptions({
zoomLevel: 2,
sidebarOpen: true
});
```
--------------------------------
### Integrate PDFme Form
Source: https://pdfme.com/docs/getting-started
Instantiate the Form class to create a UI for users to input data based on a template. Provide initial input data if available.
```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
});
```
--------------------------------
### Importing Schemas for PDF Generation
Source: https://pdfme.com/docs/custom-schemas
Import and use text, image, signature, and QR code schemas from '@pdfme/schemas' when generating PDFs with '@pdfme/generator'. Ensure the schemas are passed via the 'plugins' option.
```javascript
import type { Template } from '@pdfme/common';
import { text, image, signature, barcodes } from '@pdfme/schemas';
import { generate } from '@pdfme/generator';
const template: Template = {
// skip... you can use text, image, signature, 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,
signature,
qrcode: barcodes.qrcode,
},
});
```
--------------------------------
### Generate PDF from Form Inputs
Source: https://pdfme.com/docs/getting-started
Retrieve user inputs from the Form instance using `getInputs` and pass them to the `generate` function to create a PDF blob.
```javascript
generate({ template, inputs: form.getInputs() }).then((pdf) => {
const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
window.open(URL.createObjectURL(blob));
});
```
--------------------------------
### Initialize pdfme Viewer
Source: https://pdfme.com/docs/getting-started
Use the Viewer component to display a PDF file in a mobile browser. It's similar to the Form component but does not allow user editing.
```javascript
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 });
```
--------------------------------
### Import pdfme UI Components with Webpack
Source: https://pdfme.com/docs/getting-started
Import the Designer, Form, and Viewer components for UI integration when using webpack.
```typescript
import type { Template } from '@pdfme/common';
import { Designer, Form, Viewer } from '@pdfme/ui';
```
--------------------------------
### Handle PDF Generation with pdfme Cloud API
Source: https://app.pdfme.com/
Use this JavaScript snippet to send user inputs and a template ID to the pdfme Cloud API for PDF generation. Ensure you replace 'your_api_key_here' with your actual API key.
```javascript
const handlePDFGeneration = async (e) => {
e.preventDefault();
const response = await fetch('https://api.pdfme.com/v1/pdf', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-KEY': 'your_api_key_here',
},
body: JSON.stringify({
inputs: userInputs,
template: '7aba5640-ea8a-11e...'
})
});
const blob = await response.blob();
setPdfUrl(URL.createObjectURL(blob));
};
return (
Generate PDF