mirror/pdfme
1
0
Fork 0
mirror of https://github.com/pdfme/pdfme.git synced 2026-04-23 07:31:18 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
26a129f4dbd6309fd0c8f0eaa94c19bd3bcad00f
pdfme/website/docs/api/ui/classes/Designer.md
Kyohei Fukuda bcede1621d Add about table page in website
2023-03-21 16:37:56 +09:00

388 lines
16 KiB
Markdown
Raw Blame History

---
id: "Designer"
title: "Class: Designer"
sidebar_label: "Designer"
sidebar_position: 0
custom_edit_url: null
---
## Hierarchy
- `BaseUIClass`
↳ **`Designer`**
## Constructors
### constructor
• **new Designer**(`props`)
#### Parameters
| Name | Type |
| :------ | :------ |
| `props` | `Object` |
| `props.domContainer` | `HTMLElement` |
| `props.options?` | `Object` |
| `props.options.font?` | `Record`<`string`, { `data`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `fallback?`: `boolean` ; `subset?`: `boolean` }\> |
| `props.options.lang?` | ``"en"`` \| ``"ja"`` |
| `props.template` | `Object` |
| `props.template.basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `props.template.columns?` | `string`[] |
| `props.template.sampledata?` | `Record`<`string`, `string`\>[] |
| `props.template.schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
#### Overrides
BaseUIClass.constructor
#### Defined in
[ui/src/Designer.tsx:14](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L14)
## Properties
### domContainer
• `Protected` **domContainer**: ``null`` \| `HTMLElement`
#### Inherited from
BaseUIClass.domContainer
#### Defined in
[ui/src/class.ts:58](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L58)
___
### onChangeTemplateCallback
• `Private` `Optional` **onChangeTemplateCallback**: (`template`: { `basePdf`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `columns?`: `string`[] ; `sampledata?`: `Record`<`string`, `string`\>[] ; `schemas`: `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] }) => `void`
#### Type declaration
▸ (`template`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `template` | `Object` |
| `template.basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `template.columns?` | `string`[] |
| `template.sampledata?` | `Record`<`string`, `string`\>[] |
| `template.schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
##### Returns
`void`
#### Defined in
[ui/src/Designer.tsx:12](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L12)
___
### onSaveTemplateCallback
• `Private` `Optional` **onSaveTemplateCallback**: (`template`: { `basePdf`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `columns?`: `string`[] ; `sampledata?`: `Record`<`string`, `string`\>[] ; `schemas`: `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] }) => `void`
#### Type declaration
▸ (`template`): `void`
##### Parameters
| Name | Type |
| :------ | :------ |
| `template` | `Object` |
| `template.basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `template.columns?` | `string`[] |
| `template.sampledata?` | `Record`<`string`, `string`\>[] |
| `template.schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
##### Returns
`void`
#### Defined in
[ui/src/Designer.tsx:11](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L11)
___
### resizeObserver
• **resizeObserver**: `ResizeObserver`
#### Inherited from
BaseUIClass.resizeObserver
#### Defined in
[ui/src/class.ts:77](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L77)
___
### size
• `Protected` **size**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `height` | `number` |
| `width` | `number` |
#### Inherited from
BaseUIClass.size
#### Defined in
[ui/src/class.ts:62](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L62)
___
### template
• `Protected` **template**: `Object`
#### Type declaration
| Name | Type |
| :------ | :------ |
| `basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `columns?` | `string`[] |
| `sampledata?` | `Record`<`string`, `string`\>[] |
| `schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
#### Inherited from
BaseUIClass.template
#### Defined in
[ui/src/class.ts:60](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L60)
## Methods
### destroy
▸ **destroy**(): `void`
#### Returns
`void`
#### Inherited from
BaseUIClass.destroy
#### Defined in
[ui/src/class.ts:135](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L135)
___
### getFont
▸ `Protected` **getFont**(): `Record`<`string`, { `data`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `fallback?`: `boolean` ; `subset?`: `boolean` }\>
#### Returns
`Record`<`string`, { `data`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `fallback?`: `boolean` ; `subset?`: `boolean` }\>
#### Inherited from
BaseUIClass.getFont
#### Defined in
[ui/src/class.ts:104](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L104)
___
### getI18n
▸ `Protected` **getI18n**(): (`key`: ``"field"`` \| ``"cancel"`` \| ``"fieldName"`` \| ``"require"`` \| ``"uniq"`` \| ``"inputExample"`` \| ``"edit"`` \| ``"plsInputName"`` \| ``"fieldMustUniq"`` \| ``"notUniq"`` \| ``"noKeyName"`` \| ``"fieldsList"`` \| ``"addNewField"`` \| ``"editField"`` \| ``"type"`` \| ``"errorOccurred"`` \| ``"errorBulkUpdateFieldName"`` \| ``"commitBulkUpdateFieldName"`` \| ``"bulkUpdateFieldName"``) => `string`
#### Returns
`fn`
▸ (`key`): `string`
##### Parameters
| Name | Type |
| :------ | :------ |
| `key` | ``"field"`` \| ``"cancel"`` \| ``"fieldName"`` \| ``"require"`` \| ``"uniq"`` \| ``"inputExample"`` \| ``"edit"`` \| ``"plsInputName"`` \| ``"fieldMustUniq"`` \| ``"notUniq"`` \| ``"noKeyName"`` \| ``"fieldsList"`` \| ``"addNewField"`` \| ``"editField"`` \| ``"type"`` \| ``"errorOccurred"`` \| ``"errorBulkUpdateFieldName"`` \| ``"commitBulkUpdateFieldName"`` \| ``"bulkUpdateFieldName"`` |
##### Returns
`string`
#### Inherited from
BaseUIClass.getI18n
#### Defined in
[ui/src/class.ts:100](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L100)
___
### getTemplate
▸ **getTemplate**(): `Object`
#### Returns
`Object`
| Name | Type |
| :------ | :------ |
| `basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `columns?` | `string`[] |
| `sampledata?` | `Record`<`string`, `string`\>[] |
| `schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
#### Inherited from
BaseUIClass.getTemplate
#### Defined in
[ui/src/class.ts:108](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L108)
___
### onChangeTemplate
▸ **onChangeTemplate**(`cb`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `cb` | (`template`: { `basePdf`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `columns?`: `string`[] ; `sampledata?`: `Record`<`string`, `string`\>[] ; `schemas`: `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] }) => `void` |
#### Returns
`void`
#### Defined in
[ui/src/Designer.tsx:42](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L42)
___
### onSaveTemplate
▸ **onSaveTemplate**(`cb`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `cb` | (`template`: { `basePdf`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `columns?`: `string`[] ; `sampledata?`: `Record`<`string`, `string`\>[] ; `schemas`: `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] }) => `void` |
#### Returns
`void`
#### Defined in
[ui/src/Designer.tsx:38](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L38)
___
### render
▸ `Protected` **render**(): `void`
#### Returns
`void`
#### Overrides
BaseUIClass.render
#### Defined in
[ui/src/Designer.tsx:46](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L46)
___
### saveTemplate
▸ **saveTemplate**(): `void`
#### Returns
`void`
#### Defined in
[ui/src/Designer.tsx:21](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L21)
___
### updateOptions
▸ **updateOptions**(`options`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `options` | `Object` |
| `options.font?` | `Record`<`string`, { `data`: `string` \| `ArrayBuffer` \| `Uint8Array` ; `fallback?`: `boolean` ; `subset?`: `boolean` }\> |
| `options.lang?` | ``"en"`` \| ``"ja"`` |
#### Returns
`void`
#### Inherited from
BaseUIClass.updateOptions
#### Defined in
[ui/src/class.ts:122](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/class.ts#L122)
___
### updateTemplate
▸ **updateTemplate**(`template`): `void`
#### Parameters
| Name | Type |
| :------ | :------ |
| `template` | `Object` |
| `template.basePdf` | `string` \| `ArrayBuffer` \| `Uint8Array` |
| `template.columns?` | `string`[] |
| `template.sampledata?` | `Record`<`string`, `string`\>[] |
| `template.schemas` | `Record`<`string`, { `alignment?`: ``"center"`` \| ``"left"`` \| ``"right"`` ; `backgroundColor?`: `string` ; `characterSpacing?`: `number` ; `fontColor?`: `string` ; `fontName?`: `string` ; `fontSize?`: `number` ; `height`: `number` ; `lineHeight?`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"text"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"image"`` ; `width`: `number` } \| { `height`: `number` ; `position`: { `x`: `number` ; `y`: `number` } ; `rotate?`: `number` ; `type`: ``"qrcode"`` \| ``"japanpost"`` \| ``"ean13"`` \| ``"ean8"`` \| ``"code39"`` \| ``"code128"`` \| ``"nw7"`` \| ``"itf14"`` \| ``"upca"`` \| ``"upce"`` ; `width`: `number` }\>[] |
#### Returns
`void`
#### Overrides
BaseUIClass.updateTemplate
#### Defined in
[ui/src/Designer.tsx:28](https://github.com/pdfme/pdfme/blob/77445ea/packages/ui/src/Designer.tsx#L28)
Reference in New Issue View Git Blame Copy Permalink