mirror of
https://github.com/pdfme/pdfme.git
synced 2026-04-23 15:40:25 -04:00
Complete Japanese translation of documentation files
Co-Authored-By: Kyohei Fukuda <kyouhei.fukuda0729@gmail.com>
This commit is contained in:
Devin AI
@@ -1,40 +1,40 @@
|
||||
# Converter
|
||||
# コンバーター
|
||||
|
||||
`@pdfme/converter` can be used in both Node.js and in the browser.
|
||||
`@pdfme/converter` は Node.js とブラウザの両方で使用できます。
|
||||
|
||||
Its primary purpose is to convert PDFs into other formats (like images) or to convert various data formats (like Markdown) into PDFs.
|
||||
その主な目的は、PDFを他の形式（画像など）に変換したり、様々なデータ形式（Markdownなど）をPDFに変換することです。
|
||||
|
||||
Although it's still under development, you can already use the following features:
|
||||
まだ開発中ですが、すでに以下の機能を使用することができます：
|
||||
|
||||
- **Convert PDF to Images**: [pdf2img](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/pdf2img.ts)
|
||||
- **Retrieve Each Page's Width and Height**: [pdf2size](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/pdf2size.ts)
|
||||
- **Convert Images to PDF**: [img2pdf](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/img2pdf.ts)
|
||||
- **PDFを画像に変換**: [pdf2img](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/pdf2img.ts)
|
||||
- **各ページの幅と高さを取得**: [pdf2size](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/pdf2size.ts)
|
||||
- **画像をPDFに変換**: [img2pdf](https://github.com/pdfme/pdfme/blob/main/packages/converter/src/img2pdf.ts)
|
||||
|
||||
Planned conversion features include:
|
||||
- **Markdown to PDF**: `md2pdf`
|
||||
- **PDF to Markdown**: `pdf2md`
|
||||
計画されている変換機能には以下が含まれます：
|
||||
- **MarkdownからPDF**: `md2pdf`
|
||||
- **PDFからMarkdown**: `pdf2md`
|
||||
|
||||
## Installation
|
||||
## インストール
|
||||
|
||||
```bash
|
||||
npm install @pdfme/converter
|
||||
```
|
||||
|
||||
If you want to convert PDFs to images (`pdf2img`) in Node.js, you’ll need [node-canvas](https://github.com/Automattic/node-canvas) (^2.11.2), which requires an additional step:
|
||||
Node.jsでPDFを画像に変換する（`pdf2img`）場合は、[node-canvas](https://github.com/Automattic/node-canvas)（^2.11.2）が必要で、追加のステップが必要です：
|
||||
|
||||
```bash
|
||||
npm install canvas@^2.11.2
|
||||
```
|
||||
|
||||
## Features
|
||||
## 機能
|
||||
|
||||
### pdf2img
|
||||
Converts PDF pages into images (JPEG or PNG format).
|
||||
PDFページを画像（JPEGまたはPNG形式）に変換します。
|
||||
|
||||
```ts
|
||||
import { pdf2img } from '@pdfme/converter';
|
||||
|
||||
const pdf = new ArrayBuffer(...); // Source PDF
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const images = await pdf2img(pdf, {
|
||||
imageType: 'png',
|
||||
scale: 1,
|
||||
@@ -43,26 +43,26 @@ const images = await pdf2img(pdf, {
|
||||
```
|
||||
|
||||
### pdf2size
|
||||
Retrieves the width and height of each page in a PDF.
|
||||
PDFの各ページの幅と高さを取得します。
|
||||
|
||||
```ts
|
||||
import { pdf2size } from '@pdfme/converter';
|
||||
|
||||
const pdf = new ArrayBuffer(...); // Source PDF
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const sizes = await pdf2size(pdf, {
|
||||
scale: 1, // Scale factor (default: 1)
|
||||
scale: 1, // スケールファクター（デフォルト: 1）
|
||||
});
|
||||
// sizes: Array<{ width: number, height: number }>
|
||||
```
|
||||
|
||||
### img2pdf
|
||||
Converts one or more images (JPEG or PNG) into a single PDF file.
|
||||
1つまたは複数の画像（JPEGまたはPNG）を1つのPDFファイルに変換します。
|
||||
|
||||
```ts
|
||||
import { img2pdf } from '@pdfme/converter';
|
||||
|
||||
const image1 = new ArrayBuffer(...); // First image
|
||||
const image2 = new ArrayBuffer(...); // Second image
|
||||
const image1 = new ArrayBuffer(...); // 1枚目の画像
|
||||
const image2 = new ArrayBuffer(...); // 2枚目の画像
|
||||
const pdf = await img2pdf([image1, image2], {
|
||||
scale: 1,
|
||||
imageType: 'jpeg',
|
||||
@@ -71,17 +71,17 @@ const pdf = await img2pdf([image1, image2], {
|
||||
});
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
## エラー処理
|
||||
|
||||
All functions throw descriptive errors when invalid parameters are provided:
|
||||
無効なパラメータが提供された場合、すべての関数は説明的なエラーをスローします：
|
||||
|
||||
- Invalid PDF: `[@pdfme/converter] Invalid PDF`
|
||||
- Empty PDF: `[@pdfme/converter] The PDF file is empty`
|
||||
- Invalid page range: `[@pdfme/converter] Invalid page range`
|
||||
- Empty image array: `[@pdfme/converter] Input must be a non-empty array of image buffers`
|
||||
- Invalid image: `[@pdfme/converter] Failed to process image`
|
||||
- 無効なPDF: `[@pdfme/converter] Invalid PDF`
|
||||
- 空のPDF: `[@pdfme/converter] The PDF file is empty`
|
||||
- 無効なページ範囲: `[@pdfme/converter] Invalid page range`
|
||||
- 空の画像配列: `[@pdfme/converter] Input must be a non-empty array of image buffers`
|
||||
- 無効な画像: `[@pdfme/converter] Failed to process image`
|
||||
|
||||
## Types
|
||||
## 型定義
|
||||
|
||||
```ts
|
||||
type ImageType = 'jpeg' | 'png';
|
||||
@@ -104,14 +104,14 @@ interface Pdf2SizeOptions {
|
||||
interface Img2PdfOptions {
|
||||
scale?: number;
|
||||
imageType?: ImageType;
|
||||
size?: { height: number, width: number }; // in millimeters
|
||||
margin?: [number, number, number, number]; // in millimeters [top, right, bottom, left]
|
||||
size?: { height: number, width: number }; // ミリメートル単位
|
||||
margin?: [number, number, number, number]; // ミリメートル単位 [上, 右, 下, 左]
|
||||
}
|
||||
```
|
||||
|
||||
## Contact
|
||||
## お問い合わせ
|
||||
|
||||
If you have any questions or suggestions about `@pdfme/converter`, please reach out via:
|
||||
`@pdfme/converter`に関するご質問やご提案がありましたら、以下までご連絡ください：
|
||||
|
||||
- **Discord**: [https://discord.gg/xWPTJbmgNV](https://discord.gg/xWPTJbmgNV)
|
||||
- **GitHub Issues**: [https://github.com/pdfme/pdfme/issues](https://github.com/pdfme/pdfme/issues)
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
# Custom Fonts
|
||||
# カスタムフォント
|
||||
|
||||
pdfme uses the [Roboto Regular 400](https://fonts.google.com/specimen/Roboto) font by default, but you can use any font you like.
|
||||
pdfmeはデフォルトで[Roboto Regular 400](https://fonts.google.com/specimen/Roboto)フォントを使用していますが、お好きなフォントを使用することができます。
|
||||
|
||||
To prioritize design, you can use your favorite fonts, and if you're using characters not included in the default Roboto font, such as Japanese or Chinese characters, they will be rendered as [Tofu](https://fonts.google.com/knowledge/glossary/tofu) in the PDF.
|
||||
デザインを優先する場合は、お気に入りのフォントを使用できます。また、日本語や中国語などのデフォルトのRobotoフォントに含まれていない文字を使用している場合、PDFでは[豆腐（Tofu）](https://fonts.google.com/knowledge/glossary/tofu)として表示されます。
|
||||
|
||||
You can use this feature to solve those issues.
|
||||
この機能を使用して、これらの問題を解決することができます。
|
||||
|
||||
## About Font type
|
||||
## フォントタイプについて
|
||||
|
||||
You can import from `@pdfme/common` as below.
|
||||
以下のように`@pdfme/common`からインポートできます。
|
||||
|
||||
```ts
|
||||
import type { Font } from '@pdfme/common';
|
||||
```
|
||||
|
||||
The type of font is as follows.
|
||||
フォントの型は以下の通りです。
|
||||
|
||||
```ts
|
||||
type Font = {
|
||||
@@ -25,9 +25,9 @@ type Font = {
|
||||
};
|
||||
};
|
||||
```
|
||||
- `data`: If you register a `string` starting with `http`, it will be automatically fetched.Or set binary data directly like `Uint8Array | ArrayBuffer`
|
||||
- \*`fallback`: Setting it to true makes it the font to use if not set to a `fontName`. **Only one of the font objects must be set to true.**
|
||||
- \*`subset`: The default is true, but it can be set to false to set the font embedding to not subset. (This setting is for a bug in fontkit when embedding certain fonts with subsetting.)
|
||||
- `data`: `http`で始まる`string`を登録すると、自動的にフェッチされます。または、`Uint8Array | ArrayBuffer`のようなバイナリデータを直接設定します。
|
||||
- \*`fallback`: trueに設定すると、`fontName`が設定されていない場合に使用するフォントになります。**フォントオブジェクトのうち1つだけをtrueに設定する必要があります。**
|
||||
- \*`subset`: デフォルトはtrueですが、フォント埋め込みをサブセットにしないようにfalseに設定できます。（この設定は、特定のフォントをサブセットで埋め込む際のfontkitのバグに対応するためのものです。）
|
||||
|
||||
```ts
|
||||
const font: Font = {
|
||||
@@ -41,13 +41,13 @@ const font: Font = {
|
||||
};
|
||||
```
|
||||
|
||||
## How to set font
|
||||
## フォントの設定方法
|
||||
|
||||
Let's check out how to set font in the generator and ui packages.
|
||||
ジェネレーターとUIパッケージでフォントを設定する方法を見てみましょう。
|
||||
|
||||
### Generator
|
||||
### ジェネレーター
|
||||
|
||||
Set font as option in [generate](/docs/getting-started#generator) function
|
||||
[generate](/docs/getting-started#generator)関数のオプションとしてフォントを設定します。
|
||||
|
||||
```ts
|
||||
import { Template, BLANK_PDF, Font } from '@pdfme/common';
|
||||
@@ -83,7 +83,7 @@ const template: Template = {
|
||||
height: 10,
|
||||
},
|
||||
{
|
||||
// <- use fallback font. (serif)
|
||||
// <- フォールバックフォントを使用（serif）
|
||||
name: 'c',
|
||||
type: 'text',
|
||||
position: { x: 20, y: 20 },
|
||||
@@ -98,7 +98,7 @@ 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));
|
||||
|
||||
@@ -109,17 +109,17 @@ generate({ template, inputs, options: { font } }).then((pdf) => {
|
||||
|
||||
### UI
|
||||
|
||||
There are two ways to set fonts in the UI. instance initialization and through method.
|
||||
The sample code is for [Designer](/docs/getting-started#designer), but the same way can be used for [Form](/docs/getting-started#form) and [Viewer](/docs/getting-started#viewer).
|
||||
UIでフォントを設定する方法は2つあります。インスタンス初期化時と、メソッドを通じての設定です。
|
||||
サンプルコードは[デザイナー](/docs/getting-started#designer)用ですが、同じ方法で[フォーム](/docs/getting-started#form)と[ビューワー](/docs/getting-started#viewer)にも使用できます。
|
||||
|
||||
#### Setting font at instance initialization
|
||||
#### インスタンス初期化時にフォントを設定
|
||||
|
||||
```ts
|
||||
import { Designer } from '@pdfme/ui';
|
||||
|
||||
const domContainer = document.getElementById('container');
|
||||
const template = {
|
||||
// skip...
|
||||
// 省略...
|
||||
};
|
||||
const font = {
|
||||
serif: {
|
||||
@@ -134,7 +134,7 @@ const font = {
|
||||
const designer = new Designer({ domContainer, template, options: { font } });
|
||||
```
|
||||
|
||||
#### Update fonts with `updateOptions`.
|
||||
#### `updateOptions`でフォントを更新
|
||||
|
||||
```ts
|
||||
const font = {
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
# Custom Schemas(Plugins)
|
||||
# カスタムスキーマ（プラグイン）
|
||||
|
||||
By default, pdfme allows you to use a text schema. However, some users may want to utilize schemas for images or QR codes.
|
||||
These can be loaded as plugins from the `@pdfme/schemas` package.
|
||||
デフォルトでは、pdfmeはテキストスキーマを使用できます。しかし、画像やQRコードのスキーマを利用したいユーザーもいるでしょう。
|
||||
これらは`@pdfme/schemas`パッケージからプラグインとして読み込むことができます。
|
||||
|
||||
You can also create your own schemas and load them similarly as plugins.
|
||||
This page explains how to use schemas from `@pdfme/schemas` and how to create your own.
|
||||
また、独自のスキーマを作成し、同様にプラグインとして読み込むこともできます。
|
||||
このページでは、`@pdfme/schemas`からスキーマを使用する方法と、独自のスキーマを作成する方法について説明します。
|
||||
|
||||
## Using Schemas from @pdfme/schemas
|
||||
## @pdfme/schemasからのスキーマの使用
|
||||
|
||||
Here, we explain how to import image and QR code schemas from `@pdfme/schemas`.
|
||||
ここでは、`@pdfme/schemas`から画像とQRコードのスキーマをインポートする方法を説明します。
|
||||
|
||||
First, install `@pdfme/schemas`.
|
||||
まず、`@pdfme/schemas`をインストールします。
|
||||
|
||||
```bash
|
||||
npm install @pdfme/schemas
|
||||
```
|
||||
|
||||
Next, import the required schemas from `@pdfme/schemas` to `@pdfme/generator` and `@pdfme/ui`.
|
||||
次に、必要なスキーマを`@pdfme/schemas`から`@pdfme/generator`と`@pdfme/ui`にインポートします。
|
||||
|
||||
The following code shows an example of importing QR code and image schemas from `@pdfme/generator` and `@pdfme/ui`.
|
||||
以下のコードは、`@pdfme/generator`と`@pdfme/ui`からQRコードと画像のスキーマをインポートする例を示しています。
|
||||
|
||||
```ts
|
||||
import type { Template } from '@pdfme/common';
|
||||
@@ -26,16 +26,16 @@ 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.
|
||||
// 省略... テンプレートでtext、image、qrcodeスキーマタイプを使用できます。
|
||||
};
|
||||
const inputs = [
|
||||
// skip...
|
||||
// 省略...
|
||||
];
|
||||
|
||||
const pdf = await generate({
|
||||
template,
|
||||
inputs,
|
||||
// ↓ You can use plugins in Generator like this.
|
||||
// ↓ このようにGeneratorでプラグインを使用できます。
|
||||
plugins: {
|
||||
text,
|
||||
image,
|
||||
@@ -44,7 +44,7 @@ const pdf = await generate({
|
||||
});
|
||||
```
|
||||
|
||||
In this `@pdfme/ui` example, we're using the Designer, but you can load plugins in the Form and Viewer in the same way.
|
||||
この`@pdfme/ui`の例では、Designerを使用していますが、FormとViewerでも同じ方法でプラグインを読み込むことができます。
|
||||
|
||||
```ts
|
||||
import type { Template } from '@pdfme/common';
|
||||
@@ -53,13 +53,13 @@ import { Designer } from '@pdfme/ui';
|
||||
|
||||
const domContainer = document.getElementById('container');
|
||||
const template: Template = {
|
||||
// skip... you can use text, image, qrcode schema type in template.
|
||||
// 省略... テンプレートでtext、image、qrcodeスキーマタイプを使用できます。
|
||||
};
|
||||
|
||||
const designer = new Designer({
|
||||
domContainer,
|
||||
template,
|
||||
// ↓ You can use plugins in Designer like this.
|
||||
// ↓ このようにDesignerでプラグインを使用できます。
|
||||
plugins: {
|
||||
text,
|
||||
image,
|
||||
@@ -68,13 +68,13 @@ const designer = new Designer({
|
||||
});
|
||||
```
|
||||
|
||||
By loading image and qrcode as plugins, you can render schemas of type image and qrcode found in your template's schemas.
|
||||
imageとqrcodeをプラグインとして読み込むことで、テンプレートのスキーマに含まれるimageタイプとqrcodeタイプのスキーマをレンダリングできます。
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
|
||||
Using plugins from Designer, you can override the default schema to remove text, replace it with custom schema, or rename label, rearrange the order.
|
||||
Designerからプラグインを使用することで、デフォルトのスキーマを上書きしてテキストを削除したり、カスタムスキーマに置き換えたり、ラベルの名前を変更したり、順序を並べ替えたりすることができます。
|
||||
|
||||
```ts
|
||||
plugins: {
|
||||
@@ -86,33 +86,33 @@ Using plugins from Designer, you can override the default schema to remove text,
|
||||
|
||||
:::
|
||||
|
||||
## Creating Your Own Schemas
|
||||
## 独自のスキーマの作成
|
||||
|
||||
Next, we will introduce the method for those who want to create their own schemas.
|
||||
If you have created a schema or have an idea for one, please share it on [GitHub Discussions](https://github.com/pdfme/pdfme/discussions/288).
|
||||
We believe that since pdfme is developed as open-source, everyone should be able to share and develop schemas together.
|
||||
次に、独自のスキーマを作成したい人のための方法を紹介します。
|
||||
スキーマを作成した場合や、アイデアがある場合は、[GitHub Discussions](https://github.com/pdfme/pdfme/discussions/288)で共有してください。
|
||||
pdfmeはオープンソースとして開発されているため、誰もがスキーマを共有し、一緒に開発できるべきだと考えています。
|
||||
|
||||
### Overview of Custom Schemas / Plugins
|
||||
### カスタムスキーマ/プラグインの概要
|
||||
|
||||
Custom schemas consist of three elements, which are collectively referred to as plugins.
|
||||
The type definitions for plugins are defined within the [packages/common/src/types.ts](https://github.com/pdfme/pdfme/blob/main/packages/common/src/types.ts) file.
|
||||
カスタムスキーマは3つの要素で構成されており、これらを総称してプラグインと呼びます。
|
||||
プラグインの型定義は[packages/common/src/types.ts](https://github.com/pdfme/pdfme/blob/main/packages/common/src/types.ts)ファイル内で定義されています。
|
||||
|
||||
We will explain how the **Plugin** is structured and how it operates.
|
||||
**プラグイン**の構造と動作方法について説明します。
|
||||
|
||||
- **pdf**: Used in `@pdfme/generator`, it includes code for rendering schemas into PDFs. The PDF rendering process is handled by [pdf-lib](https://pdf-lib.js.org/).
|
||||
- **ui**: Used in `@pdfme/ui`, it includes code for rendering schemas into the DOM. The ui has the following modes:
|
||||
- **viewer**: Utilized in [Viewer](/docs/getting-started#viewer), [Designer](/docs/getting-started#designer) (when no field is selected). Functions as a preview by matching the rendering and appearance of the PDF.
|
||||
- **form**: Utilized in [Form](/docs/getting-started#form). Functions as a form that users can input into.
|
||||
- **designer**: Utilized in [Designer](/docs/getting-started#designer) (when a field is double-clicked). Basically the same as the form but serves as a WYSIWYG editor where users can input. For textarea and input elements, focusing is required.
|
||||
- **propPanel**: Used in `@pdfme/ui`'s [Designer](/docs/getting-started#designer), it allows you to add custom property editing forms to the sidebar when a field is selected. You can fill it out using [form-render](https://xrender.fun/form-render)'s JSON format (widget extensions are also possible).
|
||||
- **pdf**: `@pdfme/generator`で使用され、スキーマをPDFにレンダリングするためのコードが含まれています。PDFレンダリングプロセスは[pdf-lib](https://pdf-lib.js.org/)によって処理されます。
|
||||
- **ui**: `@pdfme/ui`で使用され、スキーマをDOMにレンダリングするためのコードが含まれています。uiには以下のモードがあります：
|
||||
- **viewer**: [Viewer](/docs/getting-started#viewer)、[Designer](/docs/getting-started#designer)（フィールドが選択されていない場合）で使用されます。PDFのレンダリングと外観に合わせてプレビューとして機能します。
|
||||
- **form**: [Form](/docs/getting-started#form)で使用されます。ユーザーが入力できるフォームとして機能します。
|
||||
- **designer**: [Designer](/docs/getting-started#designer)（フィールドがダブルクリックされた場合）で使用されます。基本的にはフォームと同じですが、ユーザーが入力できるWYSIWYGエディタとして機能します。textareaやinput要素の場合、フォーカスが必要です。
|
||||
- **propPanel**: `@pdfme/ui`の[Designer](/docs/getting-started#designer)で使用され、フィールドが選択されたときにサイドバーにカスタムプロパティ編集フォームを追加できます。[form-render](https://xrender.fun/form-render)のJSON形式を使用して入力できます（ウィジェット拡張も可能）。
|
||||
|
||||
:::note
|
||||
pdfme relies on [pdf-lib](https://pdf-lib.js.org/) and [form-render](https://xrender.fun/form-render).
|
||||
These libraries are manipulated through plugins to achieve their functionalities within pdfme.
|
||||
Please refer to the documentation of the above libraries as needed.
|
||||
pdfmeは[pdf-lib](https://pdf-lib.js.org/)と[form-render](https://xrender.fun/form-render)に依存しています。
|
||||
これらのライブラリはプラグインを通じて操作され、pdfme内での機能を実現しています。
|
||||
必要に応じて上記のライブラリのドキュメントを参照してください。
|
||||
:::
|
||||
|
||||
The images below highlight where the pdf, ui, and propPanel of the plugin are used.
|
||||
以下の画像は、プラグインのpdf、ui、propPanelが使用される場所を示しています。
|
||||
|
||||
- **pdf**
|
||||
|
||||
@@ -121,85 +121,85 @@ The images below highlight where the pdf, ui, and propPanel of the plugin are us
|
||||
- **ui(mode: designer), ui(mode: viewer), propPanel**
|
||||
|
||||
|
||||
### Learning How to Create from @pdfme/schemas' Code
|
||||
### @pdfme/schemasのコードから学ぶ作成方法
|
||||
|
||||
If you're looking to create your own schema, it is recommended to refer to the existing code within `@pdfme/schemas` while doing so.
|
||||
The code for existing schemas can be found in the files below:
|
||||
独自のスキーマを作成する場合は、`@pdfme/schemas`内の既存のコードを参照することをお勧めします。
|
||||
既存のスキーマのコードは以下のファイルにあります：
|
||||
|
||||
- [packages/schemas/src/text/index.ts](https://github.com/pdfme/pdfme/tree/main/packages/schemas/src/text/index.ts): The most complex schema in terms of PDF rendering. The propPanel is also customized using [form-render's Widget](https://xrender.fun/form-render/advanced-widget), demonstrating that the plugin can meet complex needs.
|
||||
- [packages/schemas/src/graphics/image.ts](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/graphics/image.ts): Simple implementation for PDF rendering, but uses an input type="file" element for image input during ui(mode: form) and ui(mode: designer) rendering. Overall, it’s a simple implementation and may serve as a good starting point.
|
||||
- [packages/schemas/src/barcodes/index.ts](https://github.com/pdfme/pdfme/tree/main/packages/schemas/src/barcodes/index.ts): Cool for generating barcodes in real-time for ui preview, and shares that module with pdf. Also, supports more than 10 types of barcodes and changes the form in the propPanel according to the type of barcode. Demonstrates that the plugin can be both flexible and efficient.
|
||||
- [packages/schemas/src/text/index.ts](https://github.com/pdfme/pdfme/tree/main/packages/schemas/src/text/index.ts): PDFレンダリングの観点から最も複雑なスキーマです。propPanelも[form-renderのWidget](https://xrender.fun/form-render/advanced-widget)を使用してカスタマイズされており、プラグインが複雑なニーズに対応できることを示しています。
|
||||
- [packages/schemas/src/graphics/image.ts](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/graphics/image.ts): PDFレンダリングのシンプルな実装ですが、ui(mode: form)とui(mode: designer)レンダリング中に画像入力にinput type="file"要素を使用しています。全体的にシンプルな実装であり、良い出発点になるかもしれません。
|
||||
- [packages/schemas/src/barcodes/index.ts](https://github.com/pdfme/pdfme/tree/main/packages/schemas/src/barcodes/index.ts): uiプレビュー用にバーコードをリアルタイムで生成するのに優れており、そのモジュールをpdfと共有しています。また、10種類以上のバーコードをサポートし、バーコードのタイプに応じてpropPanelのフォームを変更します。プラグインが柔軟かつ効率的であることを示しています。
|
||||
|
||||
:::tip
|
||||
|
||||
- If `PropPanel.defaultSchema.rotate` is not set or is undefined, the rotate handle will disappear from the Designer.
|
||||
- If rotation is not required, it's efficient to skip its implementation in PDF rendering.
|
||||
- `PropPanel.defaultSchema.rotate`が設定されていないか、undefinedの場合、Designerから回転ハンドルが消えます。
|
||||
- 回転が不要な場合は、PDFレンダリングでの実装をスキップすると効率的です。
|
||||
|
||||
:::
|
||||
|
||||
### Sample Scenario for Creating a Signature Plugin
|
||||
### 署名プラグイン作成のサンプルシナリオ
|
||||
|
||||
As a sample scenario, let's try creating a plugin that allows you to input signatures in the form.
|
||||
Specifically, it should be possible to input the signature using [signature_pad](https://github.com/szimek/signature_pad), and to render that signature as an image in both the DOM and PDF.
|
||||
サンプルシナリオとして、フォームに署名を入力できるプラグインを作成してみましょう。
|
||||
具体的には、[signature_pad](https://github.com/szimek/signature_pad)を使用して署名を入力し、その署名をDOMとPDFの両方で画像としてレンダリングできるようにします。
|
||||
|
||||
[](https://playground.pdfme.com/)
|
||||
|
||||
- Demo: https://playground.pdfme.com/
|
||||
- Code: [pdfme-playground/src/plugins/signature.ts](https://github.com/pdfme/pdfme-playground/blob/main/src/plugins/signature.ts)
|
||||
- デモ: https://playground.pdfme.com/
|
||||
- コード: [pdfme-playground/src/plugins/signature.ts](https://github.com/pdfme/pdfme-playground/blob/main/src/plugins/signature.ts)
|
||||
|
||||
|
||||
### Caveats for writing Custom Schemas
|
||||
### カスタムスキーマ作成時の注意点
|
||||
|
||||
#### Renderer schema caching
|
||||
#### レンダラースキーマのキャッシング
|
||||
|
||||
pdfme supports caching of memory or cpu-intensive content so that it can be re-used within the same rendering process.
|
||||
pdfmeは、メモリやCPUを多く使用するコンテンツのキャッシングをサポートしており、同じレンダリングプロセス内で再利用できます。
|
||||
|
||||
The most common use-case for this is when you're rendering a large number of PDFs with the same template. Often these
|
||||
inputs might be the same and your schema could benefit from caching them. This is optional, but if you're intending for your custom schema to be used by others then you should consider it.
|
||||
最も一般的なユースケースは、同じテンプレートで多数のPDFをレンダリングする場合です。多くの場合、これらの
|
||||
入力は同じである可能性があり、スキーマはキャッシングの恩恵を受けることができます。これはオプションですが、カスタムスキーマを他の人に使用してもらうことを意図している場合は検討すべきです。
|
||||
|
||||
Examples of caching are available in both [image](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/graphics/image.ts) and [barcode](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/barcodes/pdfRender.ts) schema render functions. You will need to choosing a caching key that captures the uniqueness of your generated PDF artifact (excluding attributes such as size and position, which are usually handled by pdf-lib on rendering). You will notice in the barcode schema that it requires more attributes to describe it's uniqueness compare to images which use the default `getCacheKey` function.
|
||||
キャッシングの例は、[image](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/graphics/image.ts)と[barcode](https://github.com/pdfme/pdfme/blob/main/packages/schemas/src/barcodes/pdfRender.ts)のスキーマレンダリング関数の両方で利用できます。生成されるPDFアーティファクトの一意性を捉えるキャッシュキーを選択する必要があります（サイズや位置などの属性は除外され、通常はレンダリング時にpdf-libによって処理されます）。バーコードスキーマでは、デフォルトの`getCacheKey`関数を使用する画像と比較して、その一意性を記述するためにより多くの属性が必要であることに気付くでしょう。
|
||||
|
||||
## Community Contributions
|
||||
## コミュニティの貢献
|
||||
|
||||
The pdfme community has created and shared various custom plugins that you might find useful in your projects. Here are some community-contributed plugins:
|
||||
pdfmeコミュニティは、プロジェクトで役立つさまざまなカスタムプラグインを作成し共有しています。以下はコミュニティによって貢献されたプラグインの一部です：
|
||||
|
||||
### Lightweight QR Code Plugin
|
||||
### 軽量QRコードプラグイン
|
||||
|
||||
A lightweight alternative QR code plugin that uses the `qrcode` npm package instead of the larger `bwip-js` package used in the built-in barcode schemas. This plugin is significantly smaller in bundle size while still providing QR code functionality.
|
||||
組み込みのバーコードスキーマで使用される大きな`bwip-js`パッケージの代わりに、`qrcode` npmパッケージを使用する軽量な代替QRコードプラグインです。このプラグインはQRコード機能を提供しながらも、バンドルサイズが大幅に小さくなっています。
|
||||
|
||||
- **Gist**: [A light weight qrcode plugin for pdfme](https://gist.github.com/kyasu1/0def72d6f0826b0a9571b6e13f3c9065)
|
||||
- **Author**: [kyasu1](https://github.com/kyasu1)
|
||||
- **Features**:
|
||||
- Smaller bundle size compared to the built-in barcode schemas
|
||||
- Customizable background and bar colors
|
||||
- Simple integration with pdfme
|
||||
- **Gist**: [pdfmeのための軽量qrcodeプラグイン](https://gist.github.com/kyasu1/0def72d6f0826b0a9571b6e13f3c9065)
|
||||
- **作者**: [kyasu1](https://github.com/kyasu1)
|
||||
- **特徴**:
|
||||
- 組み込みのバーコードスキーマと比較して小さいバンドルサイズ
|
||||
- カスタマイズ可能な背景色とバーの色
|
||||
- pdfmeとの簡単な統合
|
||||
|
||||
To use this plugin:
|
||||
このプラグインを使用するには：
|
||||
|
||||
1. Install the required dependency:
|
||||
1. 必要な依存関係をインストールします：
|
||||
```bash
|
||||
npm install qrcode -S
|
||||
```
|
||||
|
||||
2. Add the plugin code to your project (e.g., in `./src/plugins/qrCode.ts`)
|
||||
2. プラグインコードをプロジェクトに追加します（例：`./src/plugins/qrCode.ts`）
|
||||
|
||||
3. Import and use the plugin in your generator or UI components:
|
||||
3. ジェネレーターまたはUIコンポーネントでプラグインをインポートして使用します：
|
||||
```ts
|
||||
import qrCode from "./plugins/qrCode.js";
|
||||
|
||||
// In your generator
|
||||
// ジェネレーターでの使用例
|
||||
const pdf = await generate({
|
||||
template,
|
||||
inputs,
|
||||
options: { font },
|
||||
plugins: {
|
||||
// Your other plugins
|
||||
// 他のプラグイン
|
||||
NodeQRCode: qrCode
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
4. Use the schema in your template:
|
||||
4. テンプレートでスキーマを使用します：
|
||||
```json
|
||||
{
|
||||
"type": "node-qrCode",
|
||||
@@ -218,5 +218,5 @@ To use this plugin:
|
||||
```
|
||||
|
||||
:::tip
|
||||
If you've created a useful plugin for pdfme, please share it on [GitHub Discussions](https://github.com/pdfme/pdfme/discussions/288) so others can benefit from your work!
|
||||
pdfmeのために役立つプラグインを作成した場合は、[GitHub Discussions](https://github.com/pdfme/pdfme/discussions/288)で共有して、他の人があなたの成果を活用できるようにしてください！
|
||||
:::
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
# Custom UI
|
||||
# カスタムUI
|
||||
|
||||
`@pdfme/ui` allows customization of themes and labels through options.
|
||||
This page explains how to customize these elements.
|
||||
`@pdfme/ui`はオプションを通じてテーマとラベルのカスタマイズが可能です。
|
||||
このページではこれらの要素をカスタマイズする方法を説明します。
|
||||
|
||||
_Sample code uses the [Designer](/docs/getting-started#designer), but [Form](/docs/getting-started#form) and [Viewer](/docs/getting-started#viewer) can be customized in the same way._
|
||||
_サンプルコードは[デザイナー](/docs/getting-started#designer)を使用していますが、[フォーム](/docs/getting-started#form)と[ビューワー](/docs/getting-started#viewer)も同じ方法でカスタマイズできます。_
|
||||
|
||||
## UI Theme
|
||||
## UIテーマ
|
||||
|
||||
pdfme internally uses [Ant Design](https://ant.design/).
|
||||
You can apply the Ant Design theme to the pdfme UI.
|
||||
pdfmeは内部的に[Ant Design](https://ant.design/)を使用しています。
|
||||
Ant Designのテーマをpdfme UIに適用することができます。
|
||||
|
||||
Refer to [Ant Design's documentation](https://ant.design/docs/react/customize-theme) for how to customize the theme.
|
||||
For the API reference, see [here](https://ant.design/docs/react/customize-theme#api).
|
||||
テーマのカスタマイズ方法については[Ant Designのドキュメント](https://ant.design/docs/react/customize-theme)を参照してください。
|
||||
APIリファレンスは[こちら](https://ant.design/docs/react/customize-theme#api)をご覧ください。
|
||||
|
||||
```ts
|
||||
new Designer({
|
||||
@@ -29,21 +29,21 @@ new Designer({
|
||||
|
||||
|
||||
|
||||
## UI Language and Labels
|
||||
## UI言語とラベル
|
||||
|
||||
:::note
|
||||
The label customization feature is not yet implemented.
|
||||
ラベルカスタマイズ機能はまだ実装されていません。
|
||||
[Custom Label for UI #107](https://github.com/pdfme/pdfme/issues/107)
|
||||
:::
|
||||
|
||||
To change the language, modify `lang` in `options`. (The default for `lang` is `en`.)
|
||||
Currently, only `'en', 'ja', 'ar', 'th', 'pl', 'it'` are supported.
|
||||
To support additional languages, create an issue or send a pull request.
|
||||
言語を変更するには、`options`の`lang`を変更します。（`lang`のデフォルトは`en`です。）
|
||||
現在、`'en', 'ja', 'ar', 'th', 'pl', 'it'`のみがサポートされています。
|
||||
追加の言語をサポートするには、issueを作成するかプルリクエストを送信してください。
|
||||
|
||||
To use custom labels instead of the provided ones, change `labels` in `options`.
|
||||
For supported labels, refer to [this i18n.ts](https://github.com/pdfme/pdfme/blob/main/packages/ui/src/i18n.ts).
|
||||
提供されているラベルの代わりにカスタムラベルを使用するには、`options`の`labels`を変更します。
|
||||
サポートされているラベルについては、[この i18n.ts](https://github.com/pdfme/pdfme/blob/main/packages/ui/src/i18n.ts)を参照してください。
|
||||
|
||||
pdfme first loads `lang` from `options`, then reads and overrides from `options`' `labels`.
|
||||
pdfmeはまず`options`から`lang`を読み込み、次に`options`の`labels`から読み込んで上書きします。
|
||||
|
||||
```ts
|
||||
new Designer({
|
||||
@@ -52,20 +52,20 @@ new Designer({
|
||||
options: {
|
||||
lang: 'ja',
|
||||
labels: {
|
||||
fieldsList: '入力項目一覧ビュー', // override the label for the edit button
|
||||
youCanCreateYourOwnLabel: '独自のラベルを作成できます', // add a new label for the custom plugin
|
||||
fieldsList: '入力項目一覧ビュー', // 編集ボタンのラベルを上書き
|
||||
youCanCreateYourOwnLabel: '独自のラベルを作成できます', // カスタムプラグイン用の新しいラベルを追加
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Create your own labels and use the i18n function from the plugin to retrieve the labels. Please refer to the implementation of the [Signature plugin](https://github.com/pdfme/pdfme/blob/main/playground/src/plugins/signature.ts) in the Playground code.
|
||||
独自のラベルを作成し、プラグインからi18n関数を使用してラベルを取得します。Playgroundコードの[署名プラグイン](https://github.com/pdfme/pdfme/blob/main/playground/src/plugins/signature.ts)の実装を参照してください。
|
||||
|
||||
## UI Maximum Zoom Level
|
||||
## UI最大ズームレベル
|
||||
|
||||
By default, pdfme can zoom up to 200% of the original PDF size.
|
||||
If you wish to increase this you can pass the `maxZoom` option, the percentage that you want to be the new limit, to the Designer, Form, or Viewer.
|
||||
This value should be greater than 100 and a multiple of 25.
|
||||
デフォルトでは、pdfmeは元のPDFサイズの最大200%までズームできます。
|
||||
これを増やしたい場合は、新しい制限にしたいパーセンテージを`maxZoom`オプションとしてデザイナー、フォーム、またはビューワーに渡すことができます。
|
||||
この値は100より大きく、25の倍数である必要があります。
|
||||
|
||||
```ts
|
||||
new Designer({
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Development Guide
|
||||
# 開発ガイド
|
||||
|
||||
## Community Involvement and Your Role
|
||||
## コミュニティの参加とあなたの役割
|
||||
|
||||
pdfme is proud to be an open-source project, supported and driven by our enthusiastic community. Whether you're diving into the codebase or raising your voice in our discussions, your involvement is what makes pdfme thrive.
|
||||
pdfmeは、熱心なコミュニティによってサポートされ、推進されているオープンソースプロジェクトであることを誇りに思っています。コードベースに飛び込むにしても、ディスカッションで声を上げるにしても、あなたの参加がpdfmeを発展させています。
|
||||
|
||||
<a href="https://github.com/pdfme/pdfme/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=pdfme/pdfme" />
|
||||
@@ -11,34 +11,34 @@ pdfme is proud to be an open-source project, supported and driven by our enthusi
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
**Not a coder? No problem!** From reporting bugs and becoming a sponsor to actively participating in discussions, There are many ways you can contribute. We cherish every form of participation and would be delighted to have you be a part of our development journey.
|
||||
**プログラマーではありませんか？問題ありません！** バグの報告やスポンサーになること、ディスカッションへの積極的な参加など、貢献する方法はたくさんあります。私たちはあらゆる形の参加を大切にし、あなたが開発の旅の一部になることを喜んでいます。
|
||||
|
||||
## Bug reports, questions and suggestions
|
||||
## バグ報告、質問、提案
|
||||
|
||||
If you have any bugs, or suggestions for the program or documentation, please see below.
|
||||
プログラムやドキュメントに関するバグや提案がある場合は、以下をご覧ください。
|
||||
|
||||
All bug reports and discussions are recorded in [GitHub repository](https://github.com/pdfme/pdfme).
|
||||
It is possible that some of the problems or questions have already been solved.
|
||||
すべてのバグ報告とディスカッションは[GitHubリポジトリ](https://github.com/pdfme/pdfme)に記録されています。
|
||||
問題や質問の一部はすでに解決されている可能性があります。
|
||||
|
||||
- To report application bugs, please use [GitHub issue](https://github.com/pdfme/pdfme/issues)
|
||||
- For questions or suggestions, please ask them in [Discord](https://discord.gg/xWPTJbmgNV), [GitHub Discussions](https://github.com/pdfme/pdfme/discussions).
|
||||
- アプリケーションのバグを報告するには、[GitHub issue](https://github.com/pdfme/pdfme/issues)をご利用ください
|
||||
- 質問や提案については、[Discord](https://discord.gg/xWPTJbmgNV)や[GitHub Discussions](https://github.com/pdfme/pdfme/discussions)でお尋ねください。
|
||||
|
||||
## Code Contribution
|
||||
## コード貢献
|
||||
|
||||
Basically we accept PRs for bug fixes. However, we might decide to decline your PR if contains code that add new features.
|
||||
Please remember that pdfme is created to be small and simple as possible.
|
||||
If you have any questions or suggestions, please feel free to send them to [GitHub Discussions](https://github.com/pdfme/pdfme/discussions) and we will reply as soon as possible.
|
||||
基本的に、バグ修正のためのPRを受け付けています。ただし、新機能を追加するコードが含まれている場合、PRを辞退する可能性があります。
|
||||
pdfmeはできるだけ小さくシンプルであるように作られていることを覚えておいてください。
|
||||
質問や提案がある場合は、お気軽に[GitHub Discussions](https://github.com/pdfme/pdfme/discussions)にお送りください。できるだけ早く返信いたします。
|
||||
|
||||
For insights on development: [How to develop pdfme](https://github.com/pdfme/pdfme/blob/main/DEVELOPMENT.md)
|
||||
開発に関する洞察：[pdfmeの開発方法](https://github.com/pdfme/pdfme/blob/main/DEVELOPMENT.md)
|
||||
|
||||
## Need technical support?
|
||||
## 技術サポートが必要ですか？
|
||||
|
||||
If you need technical support, please contact from [here](https://app.pdfme.com/contact?utm_source=website&utm_content=development-guide).
|
||||
技術サポートが必要な場合は、[こちら](https://app.pdfme.com/contact?utm_source=website&utm_content=development-guide)からお問い合わせください。
|
||||
|
||||
## Become a sponsor to pdfme
|
||||
## pdfmeのスポンサーになる
|
||||
|
||||
pdfme is an open source project that is free to use.
|
||||
However, it is not free to develop and maintain pdfme.
|
||||
If you are using pdfme in your business, please consider becoming a sponsor to pdfme.
|
||||
pdfmeは無料で使用できるオープンソースプロジェクトです。
|
||||
しかし、pdfmeの開発と維持は無料ではありません。
|
||||
ビジネスでpdfmeを使用している場合は、pdfmeのスポンサーになることをご検討ください。
|
||||
- [Github Sponsors](https://github.com/sponsors/pdfme)
|
||||
- [Open Collective](https://opencollective.com/pdfme)
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
# Expression
|
||||
# 式（Expression）
|
||||
|
||||
Expressions are a feature that evaluates expressions enclosed in `{}`.
|
||||
The simplest example is `{1+1}`, which evaluates to `2`.
|
||||
式は`{}`で囲まれた表現を評価する機能です。
|
||||
最も単純な例は`{1+1}`で、これは`2`と評価されます。
|
||||
|
||||
In pdfme, expressions can be used not only for simple calculations but also by utilizing user input.
|
||||
pdfmeでは、式は単純な計算だけでなく、ユーザー入力を活用することもできます。
|
||||
|
||||
For example, consider the following template:
|
||||
例えば、以下のようなテンプレートを考えてみましょう：
|
||||
|
||||
```
|
||||
{
|
||||
@@ -21,7 +21,7 @@ For example, consider the following template:
|
||||
{
|
||||
"name": "field2",
|
||||
"type": "text",
|
||||
"content": "{field1} !", // Expression!
|
||||
"content": "{field1} !", // 式！
|
||||
...
|
||||
"readOnly": true,
|
||||
}
|
||||
@@ -32,50 +32,50 @@ For example, consider the following template:
|
||||
}
|
||||
```
|
||||
|
||||
`field2` will have the value `Hello world !`. The expression `{field1} !` is evaluated like below:
|
||||
`field2`の値は`Hello world !`になります。式`{field1} !`は以下のように評価されます：
|
||||
|
||||
|
||||
|
||||
This means that `{field1}` is replaced with the value of `field1`, and `!` is appended to it.
|
||||
これは、`{field1}`が`field1`の値に置き換えられ、その後に`!`が追加されることを意味します。
|
||||
|
||||
## Use Cases
|
||||
## ユースケース
|
||||
|
||||
The following use cases can be considered:
|
||||
以下のようなユースケースが考えられます：
|
||||
|
||||
### Displaying Date or Page Numbers in Footer and Header
|
||||
### フッターとヘッダーに日付やページ番号を表示する
|
||||
|
||||
For example, you might want to display the creation date of the PDF in the header or display page numbers in the footer. Although headers and footers are explained in detail [here](/docs/headers-and-footers), expressions can also be used in the `staticSchema` used for headers and footers.
|
||||
例えば、PDFの作成日をヘッダーに表示したり、フッターにページ番号を表示したりすることができます。ヘッダーとフッターについては[こちら](/docs/headers-and-footers)で詳しく説明されていますが、ヘッダーとフッターに使用される`staticSchema`でも式を使用できます。
|
||||
|
||||
### Reusing User Input for Display
|
||||
### ユーザー入力を表示用に再利用する
|
||||
|
||||
You can reuse values entered by the user for display. For instance, if there are fields `firstName` and `lastName` entered by the user, you can concatenate and display them as `{firstName + " " + lastName}`.
|
||||
ユーザーが入力した値を表示用に再利用できます。例えば、ユーザーが入力した`firstName`と`lastName`というフィールドがある場合、それらを連結して`{firstName + " " + lastName}`として表示できます。
|
||||
|
||||
This improves usability by eliminating the need for users to enter similar information multiple times.
|
||||
これにより、ユーザーが類似の情報を複数回入力する必要がなくなり、使いやすさが向上します。
|
||||
|
||||
### Managing Values in One Place
|
||||
### 値を一箇所で管理する
|
||||
|
||||
By using expressions, you can manage values in one place. For example, if there is a value `taxRate`, you can simply change `taxRate`, and it will be reflected in all places where it is used, making changes easier.
|
||||
式を使用することで、値を一箇所で管理できます。例えば、`taxRate`という値がある場合、`taxRate`を変更するだけで、それが使用されているすべての場所に反映され、変更が容易になります。
|
||||
|
||||
## How to Use, Specifications
|
||||
## 使用方法、仕様
|
||||
|
||||
After understanding the overview and use cases, here is an explanation of the specific usage and specifications.
|
||||
概要とユースケースを理解した後、具体的な使用方法と仕様について説明します。
|
||||
|
||||
### How to Use Expressions
|
||||
### 式の使用方法
|
||||
|
||||
Expressions can be used in the `schema` property when the `readOnly` property is set to `true`. From the designer, you can set `readOnly` by unchecking the `Editable` checkbox.
|
||||
式は、`readOnly`プロパティが`true`に設定されている場合に`schema`プロパティで使用できます。デザイナーから、`Editable`チェックボックスをオフにすることで`readOnly`を設定できます。
|
||||
|
||||
As shown in the GIF below, you can start using expressions by unchecking the `Editable` checkbox.
|
||||
以下のGIFに示すように、`Editable`チェックボックスをオフにすることで式の使用を開始できます。
|
||||
|
||||
|
||||
|
||||
In other words, fields where expressions are used cannot be edited by the user.
|
||||
つまり、式が使用されているフィールドはユーザーが編集できません。
|
||||
|
||||
### 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:
|
||||
- アロー関数のみがサポートされています。
|
||||
- `eval`関数は使用できません。
|
||||
- `prototype`は使用できません。
|
||||
- 以下のグローバルオブジェクトとそのメソッドのみが使用できます：
|
||||
- Math
|
||||
- String
|
||||
- Number
|
||||
@@ -92,24 +92,24 @@ In other words, fields where expressions are used cannot be edited by the user.
|
||||
- encodeURI
|
||||
- encodeURIComponent
|
||||
|
||||
For detailed specifications, refer to [this implementation](https://github.com/pdfme/pdfme/blob/main/packages/common/src/expression.ts).
|
||||
詳細な仕様については、[この実装](https://github.com/pdfme/pdfme/blob/main/packages/common/src/expression.ts)を参照してください。
|
||||
|
||||
### Variables That Can Be Used Within Expressions
|
||||
### 式内で使用できる変数
|
||||
|
||||
- **User Input Values**
|
||||
- Values entered in [Multivariable Text](/docs/supported-features#multivariable-text) or [Table](/docs/supported-features#table) that can be parsed as JSON can be used after parsing.
|
||||
- **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**
|
||||
- **ユーザー入力値**
|
||||
- [複数変数テキスト](/docs/supported-features#multivariable-text)や[テーブル](/docs/supported-features#table)に入力された値で、JSONとして解析できるものは解析後に使用できます。
|
||||
- **他の`readOnly`フィールドの値**
|
||||
- 別の`readOnly`フィールドの値に式が使用されている場合、式が評価された後の値が使用されます。
|
||||
- **組み込み変数**
|
||||
- `currentPage`
|
||||
- `totalPages`
|
||||
- `date (YYYY/MM/DD)`
|
||||
- `dateTime (YYYY/MM/DD HH:mm)`
|
||||
|
||||
### Examples of Expressions
|
||||
### 式の例
|
||||
|
||||
The following are examples of expressions that can be used:
|
||||
以下は使用できる式の例です：
|
||||
|
||||
- **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)}'`
|
||||
- **小計:** `'{orders.reduce((sum, item) => sum + parseFloat(item[1] || 0) * parseFloat(item[2] || 0), 0)}'`
|
||||
- **税額:** `'{Number(subtotalInput) * Number(tax.rate) / 100}'`
|
||||
- **合計:** `'${Number(subtotal) + Number(tax)}'`
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
# Headers and Footers
|
||||
# ヘッダーとフッター
|
||||
|
||||
You can place elements like headers and footers that are displayed on every page and are not affected by page breaks.
|
||||
ヘッダーやフッターのような、すべてのページに表示され、ページ区切りの影響を受けない要素を配置することができます。
|
||||
|
||||
Specifically, in cases where page breaks occur—such as with [dynamic tables](/docs/tables)—you can use this feature to place elements that are not pushed down by data.
|
||||
特に、[動的テーブル](/docs/tables)のようにページ区切りが発生する場合、この機能を使用してデータによって押し下げられない要素を配置することができます。
|
||||
|
||||
For simplicity, we've described these as headers and footers. In reality, by adding a property called `staticSchema` to `basePdf`, you can place elements that are displayed on every page and are not affected by page breaks.
|
||||
簡単にするために、これらをヘッダーとフッターと表現しています。実際には、`basePdf`に`staticSchema`というプロパティを追加することで、すべてのページに表示され、ページ区切りの影響を受けない要素を配置することができます。
|
||||
|
||||
:::warning
|
||||
|
||||
This feature cannot be used when `basePdf` specifies an existing PDF. It can only be used when `basePdf` is specified with properties of the type `{ width: number, height: number, padding: [number, number, number, number] }`.
|
||||
この機能は、`basePdf`が既存のPDFを指定している場合には使用できません。`basePdf`が`{ width: number, height: number, padding: [number, number, number, number] }`型のプロパティで指定されている場合にのみ使用できます。
|
||||
|
||||
:::
|
||||
|
||||
## Example of a Footer
|
||||
## フッターの例
|
||||
|
||||
Let's explain using the footer section of an invoice template as an example.
|
||||
請求書テンプレートのフッターセクションを例に説明しましょう。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -90,14 +90,14 @@ Let's explain using the footer section of an invoice template as an example.
|
||||
}
|
||||
```
|
||||
|
||||
Notably, you can specify variables like `{info.InvoiceNo}` and `{totalInput}` in the `content` of each schema. These values are obtained from the data specified in `input`. In other words, within `staticSchema`, you can refer to the data specified in `input`.
|
||||
特筆すべきは、各スキーマの`content`に`{info.InvoiceNo}`や`{totalInput}`のような変数を指定できることです。これらの値は`input`で指定されたデータから取得されます。つまり、`staticSchema`内で`input`で指定されたデータを参照することができます。
|
||||
|
||||
For information about usable variables, please refer to the Expression documentation [here](/docs/expression#variables-that-can-be-used-within-expressions).
|
||||
使用可能な変数については、[こちら](/docs/expression#variables-that-can-be-used-within-expressions)の式のドキュメントを参照してください。
|
||||
|
||||
|
||||
|
||||
## Tips/Notes
|
||||
## ヒント/注意点
|
||||
|
||||
- By placing elements within the padding, you can display them without overlapping with elements that are pushed down when page breaks occur.
|
||||
- The `type` of the schema in `staticSchema` can specify the same types as the `schemas` in a regular template.
|
||||
- Currently, the schemas in `staticSchema` cannot be edited in the designer.
|
||||
- パディング内に要素を配置することで、ページ区切りが発生したときに押し下げられる要素と重ならずに表示することができます。
|
||||
- `staticSchema`内のスキーマの`type`は、通常のテンプレートの`schemas`と同じタイプを指定できます。
|
||||
- 現在、`staticSchema`内のスキーマはデザイナーで編集できません。
|
||||
|
||||
@@ -1,92 +1,92 @@
|
||||
# Manipulator
|
||||
# マニピュレーター
|
||||
|
||||
The `@pdfme/manipulator` package provides powerful utilities for manipulating PDF files. It can be used in both Node.js and browser environments.
|
||||
`@pdfme/manipulator`パッケージはPDFファイルを操作するための強力なユーティリティを提供します。Node.jsとブラウザ環境の両方で使用できます。
|
||||
|
||||
## Installation
|
||||
## インストール
|
||||
|
||||
```bash
|
||||
npm install @pdfme/manipulator
|
||||
```
|
||||
|
||||
## Features
|
||||
## 機能
|
||||
|
||||
### merge
|
||||
Combines multiple PDF files into a single PDF.
|
||||
### merge（結合）
|
||||
複数のPDFファイルを1つのPDFに結合します。
|
||||
|
||||
```ts
|
||||
import { merge } from '@pdfme/manipulator';
|
||||
|
||||
const pdf1 = new ArrayBuffer(...); // First PDF
|
||||
const pdf2 = new ArrayBuffer(...); // Second PDF
|
||||
const pdf1 = new ArrayBuffer(...); // 1つ目のPDF
|
||||
const pdf2 = new ArrayBuffer(...); // 2つ目のPDF
|
||||
const merged = await merge([pdf1, pdf2]);
|
||||
```
|
||||
|
||||
### split
|
||||
Splits a PDF into multiple PDFs based on page ranges.
|
||||
### split（分割）
|
||||
PDFをページ範囲に基づいて複数のPDFに分割します。
|
||||
|
||||
```ts
|
||||
import { split } from '@pdfme/manipulator';
|
||||
|
||||
const pdf = new ArrayBuffer(...); // Source PDF
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const splits = await split(pdf, [
|
||||
{ start: 0, end: 1 }, // Pages 1-2
|
||||
{ start: 2, end: 4 }, // Pages 3-5
|
||||
{ start: 0, end: 1 }, // 1-2ページ
|
||||
{ start: 2, end: 4 }, // 3-5ページ
|
||||
]);
|
||||
```
|
||||
|
||||
### rotate
|
||||
Rotates specified pages in a PDF.
|
||||
### rotate（回転）
|
||||
PDFの指定されたページを回転させます。
|
||||
|
||||
```ts
|
||||
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
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const result = await rotate(pdf, 90); // すべてのページを90度回転
|
||||
// または特定のページを回転：
|
||||
const result2 = await rotate(pdf, 90, [0, 2]); // 1ページ目と3ページ目を回転
|
||||
```
|
||||
|
||||
### insert
|
||||
Inserts PDF pages at specified positions.
|
||||
### insert（挿入）
|
||||
指定された位置にPDFページを挿入します。
|
||||
|
||||
```ts
|
||||
import { insert } from '@pdfme/manipulator';
|
||||
|
||||
const basePdf = new ArrayBuffer(...); // Base PDF
|
||||
const insertPdf = new ArrayBuffer(...); // PDF to insert
|
||||
const basePdf = new ArrayBuffer(...); // ベースPDF
|
||||
const insertPdf = new ArrayBuffer(...); // 挿入するPDF
|
||||
const result = await insert(basePdf, [
|
||||
{ pdf: insertPdf, position: 1 } // Insert after first page
|
||||
{ pdf: insertPdf, position: 1 } // 1ページ目の後に挿入
|
||||
]);
|
||||
```
|
||||
|
||||
### remove
|
||||
Removes specified pages from a PDF.
|
||||
### remove（削除）
|
||||
PDFから指定されたページを削除します。
|
||||
|
||||
```ts
|
||||
import { remove } from '@pdfme/manipulator';
|
||||
|
||||
const pdf = new ArrayBuffer(...); // Source PDF
|
||||
const result = await remove(pdf, [1, 3]); // Remove pages 2 and 4
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const result = await remove(pdf, [1, 3]); // 2ページ目と4ページ目を削除
|
||||
```
|
||||
|
||||
### move
|
||||
Moves a page from one position to another within the PDF.
|
||||
### move（移動）
|
||||
PDFの中で1つのページを別の位置に移動します。
|
||||
|
||||
```ts
|
||||
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
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const result = await move(pdf, { from: 0, to: 2 }); // 1ページ目を3番目の位置に移動
|
||||
```
|
||||
|
||||
### organize
|
||||
Performs multiple PDF operations in sequence.
|
||||
### organize（整理）
|
||||
複数のPDF操作を順番に実行します。
|
||||
|
||||
```ts
|
||||
import { organize } from '@pdfme/manipulator';
|
||||
|
||||
const pdf = new ArrayBuffer(...); // Source PDF
|
||||
const insertPdf = new ArrayBuffer(...); // PDF to insert
|
||||
const pdf = new ArrayBuffer(...); // ソースPDF
|
||||
const insertPdf = new ArrayBuffer(...); // 挿入するPDF
|
||||
const result = await organize(pdf, [
|
||||
{ type: 'remove', data: { position: 1 } },
|
||||
{ type: 'insert', data: { pdf: insertPdf, position: 0 } },
|
||||
@@ -94,16 +94,16 @@ const result = await organize(pdf, [
|
||||
]);
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
## エラー処理
|
||||
|
||||
All functions throw descriptive errors when invalid parameters are provided:
|
||||
無効なパラメータが提供された場合、すべての関数は説明的なエラーをスローします：
|
||||
|
||||
- Invalid page numbers: `[@pdfme/manipulator] Invalid page number`
|
||||
- Invalid rotation degrees: `[@pdfme/manipulator] Rotation degrees must be a multiple of 90`
|
||||
- Invalid positions: `[@pdfme/manipulator] Invalid position`
|
||||
- Empty inputs: `[@pdfme/manipulator] At least one PDF is required`
|
||||
- 無効なページ番号: `[@pdfme/manipulator] Invalid page number`
|
||||
- 無効な回転角度: `[@pdfme/manipulator] Rotation degrees must be a multiple of 90`
|
||||
- 無効な位置: `[@pdfme/manipulator] Invalid position`
|
||||
- 空の入力: `[@pdfme/manipulator] At least one PDF is required`
|
||||
|
||||
## Types
|
||||
## 型定義
|
||||
|
||||
```ts
|
||||
type PDFInput = ArrayBuffer;
|
||||
@@ -126,9 +126,9 @@ type OrganizeAction =
|
||||
| { type: 'move'; data: { from: number; to: number } };
|
||||
```
|
||||
|
||||
## Contact
|
||||
## お問い合わせ
|
||||
|
||||
If you have any questions or suggestions about `@pdfme/manipulator`, please reach out via:
|
||||
`@pdfme/manipulator`に関するご質問やご提案がありましたら、以下までご連絡ください：
|
||||
|
||||
- **Discord**: [https://discord.gg/xWPTJbmgNV](https://discord.gg/xWPTJbmgNV)
|
||||
- **GitHub Issues**: [https://github.com/pdfme/pdfme/issues](https://github.com/pdfme/pdfme/issues)
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# Tables with Dynamic Data
|
||||
# 動的データを持つテーブル
|
||||
|
||||
[](https://playground.pdfme.com/)
|
||||
[](https://playground.pdfme.com/)
|
||||
|
||||
The table schema has been added in since [V4.5.0](https://github.com/pdfme/pdfme/releases/tag/4.5.0).
|
||||
This schema allows you to add tables to PDFs and dynamically modify the table data.
|
||||
テーブルスキーマは[V4.5.0](https://github.com/pdfme/pdfme/releases/tag/4.5.0)から追加されました。
|
||||
このスキーマを使用すると、PDFにテーブルを追加し、テーブルデータを動的に変更することができます。
|
||||
|
||||
## Using the Table Schema
|
||||
## テーブルスキーマの使用方法
|
||||
|
||||
The table schema is included in the `@pdfme/schemas` package and is exported as `table`.
|
||||
You can add the table schema as a plugin to `@pdfme/ui` and `@pdfme/generator` using the code below.
|
||||
テーブルスキーマは`@pdfme/schemas`パッケージに含まれており、`table`としてエクスポートされています。
|
||||
以下のコードを使用して、テーブルスキーマを`@pdfme/ui`と`@pdfme/generator`のプラグインとして追加できます。
|
||||
|
||||
To support page breaks, ensure to set the `basePdf` property in the template to `{ width: number, height: number, padding: [number,number,number,number] }`.
|
||||
ページ区切りをサポートするには、テンプレートの`basePdf`プロパティを`{ width: number, height: number, padding: [number,number,number,number] }`に設定してください。
|
||||
|
||||
```javascript
|
||||
import { table } from '@pdfme/schemas';
|
||||
@@ -30,7 +30,7 @@ generate({
|
||||
});
|
||||
```
|
||||
|
||||
Adding a table in the Designer will create a template like the following:
|
||||
デザイナーでテーブルを追加すると、以下のようなテンプレートが作成されます：
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -115,7 +115,7 @@ Adding a table in the Designer will create a template like the following:
|
||||
}
|
||||
```
|
||||
|
||||
You can configure the generator's input for the above template like this:
|
||||
上記のテンプレートに対するジェネレーターの入力を以下のように設定できます：
|
||||
|
||||
```json
|
||||
[
|
||||
@@ -128,9 +128,9 @@ You can configure the generator's input for the above template like this:
|
||||
]
|
||||
```
|
||||
|
||||
The input can be either a 2D array or a stringified 2D array.
|
||||
入力は2次元配列または文字列化された2次元配列のいずれかです。
|
||||
|
||||
By changing the input data in the generator, you can dynamically modify the table's content.
|
||||
ジェネレーターの入力データを変更することで、テーブルの内容を動的に変更できます。
|
||||
|
||||
```json
|
||||
[
|
||||
@@ -144,54 +144,54 @@ By changing the input data in the generator, you can dynamically modify the tabl
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
If the input data spans multiple pages, automatic page breaks will be inserted.
|
||||
入力データが複数ページにまたがる場合、自動的にページ区切りが挿入されます。
|
||||
|
||||
|
||||
|
||||
|
||||
## About Table Settings
|
||||
## テーブル設定について
|
||||
|
||||
Using the Designer, you can easily set the number of columns and rows in a table. You can also freely configure the table's style.
|
||||
デザイナーを使用すると、テーブルの列数と行数を簡単に設定できます。また、テーブルのスタイルも自由に設定できます。
|
||||
|
||||
### Column and Row Settings
|
||||
### 列と行の設定
|
||||
|
||||
When you click on a selected table, it enters edit mode.
|
||||
選択したテーブルをクリックすると、編集モードになります。
|
||||
|
||||
In this mode, you can delete columns using the "-" button on each column, and add columns using the "+" button at the bottom right of the table.
|
||||
You can also change column widths by drag and drop.
|
||||
このモードでは、各列の「-」ボタンを使用して列を削除したり、テーブルの右下にある「+」ボタンを使用して列を追加したりできます。
|
||||
また、ドラッグアンドドロップで列幅を変更することもできます。
|
||||
|
||||
For row settings, you can add rows using the "+" button at the bottom of the table, and delete rows using the "-" button on the right side of each row.
|
||||
While the actual number of rows will vary depending on the data when creating the PDF, you can use this feature to set the number of rows when creating a non-editable table.
|
||||
行の設定については、テーブルの下部にある「+」ボタンを使用して行を追加したり、各行の右側にある「-」ボタンを使用して行を削除したりできます。
|
||||
PDFを作成する際の実際の行数はデータによって異なりますが、編集不可能なテーブルを作成する際に行数を設定するためにこの機能を使用できます。
|
||||
|
||||
|
||||
|
||||
|
||||
### Table Styles
|
||||
### テーブルスタイル
|
||||
|
||||
Like other schemas, you can set styles from the property panel on the right.
|
||||
The styles are broadly categorized into four types:
|
||||
他のスキーマと同様に、右側のプロパティパネルからスタイルを設定できます。
|
||||
スタイルは大きく4つのタイプに分類されます：
|
||||
|
||||
- Table Style
|
||||
- Head Style
|
||||
- Body Style
|
||||
- Column Style
|
||||
- テーブルスタイル
|
||||
- ヘッダースタイル
|
||||
- ボディスタイル
|
||||
- 列スタイル
|
||||
|
||||
For each, you can set borders, fonts, background colors, padding, and more.
|
||||
The Body's Alternate Background Color is used to alternate background colors of rows.
|
||||
それぞれに対して、境界線、フォント、背景色、パディングなどを設定できます。
|
||||
ボディの代替背景色は、行の背景色を交互に変更するために使用されます。
|
||||
|
||||
## Sample Using Table Schema
|
||||
## テーブルスキーマを使用したサンプル
|
||||
|
||||
You can check out a sample using the table schema at [https://playground.pdfme.com/](https://playground.pdfme.com/).
|
||||
テーブルスキーマを使用したサンプルは[https://playground.pdfme.com/](https://playground.pdfme.com/)で確認できます。
|
||||
|
||||
[](https://playground.pdfme.com/)
|
||||
[](https://playground.pdfme.com/)
|
||||
|
||||
Set the Template Preset to Invoice and explore the sample using the Table schema.
|
||||
テンプレートプリセットを「Invoice」に設定して、テーブルスキーマを使用したサンプルを探索してください。
|
||||
|
||||
The source code for this playground is available [here](https://github.com/pdfme/pdfme/tree/main/playground).
|
||||
このプレイグラウンドのソースコードは[こちら](https://github.com/pdfme/pdfme/tree/main/playground)で入手できます。
|
||||
|
||||
:::info
|
||||
|
||||
If you have feedback or suggestions regarding the use of the table schema, please let us know via [GitHub issues](https://github.com/pdfme/pdfme/issues) or [Discord](https://discord.gg/xWPTJbmgNV).
|
||||
Your feedback contributes significantly to the development of pdfme.
|
||||
テーブルスキーマの使用に関するフィードバックや提案がある場合は、[GitHub issues](https://github.com/pdfme/pdfme/issues)または[Discord](https://discord.gg/xWPTJbmgNV)からお知らせください。
|
||||
あなたのフィードバックはpdfmeの開発に大きく貢献します。
|
||||
|
||||
:::
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
# Template Contribution Guide ❤️
|
||||
# テンプレート貢献ガイド ❤️
|
||||
|
||||
Add your template to pdfme's Example Templates!
|
||||
**The [Template List page](/templates) is one of the most important pages on pdfme.com, created to help new users find templates that match their requirements and save time.**
|
||||
あなたのテンプレートをpdfmeのサンプルテンプレートに追加しましょう！
|
||||
**[テンプレート一覧ページ](/templates)はpdfme.comの最も重要なページの一つで、新しいユーザーが要件に合ったテンプレートを見つけて時間を節約できるように作られています。**
|
||||
|
||||
By adding your template, you can contribute to the pdfme community.
|
||||
We use GitHub pull requests for template additions - no builds or code changes required.
|
||||
テンプレートを追加することで、pdfmeコミュニティに貢献できます。
|
||||
テンプレートの追加にはGitHubのプルリクエストを使用します - ビルドやコード変更は必要ありません。
|
||||
|
||||
Even if you're new to OSS contributions, you can easily contribute by following this guide.
|
||||
OSSへの貢献が初めてでも、このガイドに従うことで簡単に貢献できます。
|
||||
|
||||
## Template Addition Steps
|
||||
## テンプレート追加の手順
|
||||
|
||||
### 1. Create Your Template
|
||||
Design your template in the [Template Designer](/template-design), then download `template.json` using the `DL Template` button
|
||||
### 1. テンプレートを作成する
|
||||
[テンプレートデザイナー](/template-design)でテンプレートをデザインし、`DL Template`ボタンを使って`template.json`をダウンロードします
|
||||
|
||||
### 2. Prepare Repository
|
||||
1. **[Create Fork]**
|
||||
Click the `Fork` button at the top-right of [pdfme repository](https://github.com/pdfme/pdfme) to copy to your GitHub account
|
||||
### 2. リポジトリを準備する
|
||||
1. **[フォークを作成]**
|
||||
[pdfmeリポジトリ](https://github.com/pdfme/pdfme)の右上にある`Fork`ボタンをクリックして、あなたのGitHubアカウントにコピーします
|
||||
|
||||
2. **[Clone Locally]**
|
||||
Run in terminal (replace `YOUR-GITHUB-USERNAME` with your GitHub username):
|
||||
2. **[ローカルにクローン]**
|
||||
ターミナルで実行します（`YOUR-GITHUB-USERNAME`をあなたのGitHubユーザー名に置き換えてください）：
|
||||
```bash
|
||||
git clone git@github.com:YOUR-GITHUB-USERNAME/pdfme.git
|
||||
cd pdfme
|
||||
```
|
||||
|
||||
3. **[Create Branch]**
|
||||
Create new branch (example using template name `my-new-template`):
|
||||
3. **[ブランチを作成]**
|
||||
新しいブランチを作成します（例：テンプレート名`my-new-template`を使用）：
|
||||
```bash
|
||||
git checkout -b add-my-new-template
|
||||
```
|
||||
|
||||
### 3. Add Template Files
|
||||
1. **[Create Directory]**
|
||||
Create new directory in kebab-case (e.g. `my-new-template`):
|
||||
### 3. テンプレートファイルを追加する
|
||||
1. **[ディレクトリを作成]**
|
||||
kebab-caseで新しいディレクトリを作成します（例：`my-new-template`）：
|
||||
```bash
|
||||
mkdir -p playground/public/template-assets/my-new-template
|
||||
```
|
||||
- Directory name will appear as `My New Template` on [Template List page](/templates)
|
||||
- ディレクトリ名は[テンプレート一覧ページ](/templates)で`My New Template`として表示されます
|
||||
|
||||
2. **[Place Files]**
|
||||
Place downloaded `template.json` in the new directory
|
||||
(Optional) Add `author` field for credit:
|
||||
2. **[ファイルを配置]**
|
||||
ダウンロードした`template.json`を新しいディレクトリに配置します
|
||||
（オプション）クレジットのために`author`フィールドを追加します：
|
||||
```json
|
||||
{
|
||||
"author": "YOUR-GITHUB-USERNAME",
|
||||
@@ -48,43 +48,43 @@ Design your template in the [Template Designer](/template-design), then download
|
||||
}
|
||||
```
|
||||
|
||||
Reference: https://github.com/pdfme/pdfme/tree/main/playground/public/template-assets/invoice
|
||||
参考：https://github.com/pdfme/pdfme/tree/main/playground/public/template-assets/invoice
|
||||
|
||||
### 4. Commit Changes
|
||||
1. **[Record Changes]**
|
||||
Run in terminal:
|
||||
### 4. 変更をコミットする
|
||||
1. **[変更を記録]**
|
||||
ターミナルで実行します：
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat: Add My New Template"
|
||||
```
|
||||
|
||||
2. **[Push to GitHub]**
|
||||
Push to your repository:
|
||||
2. **[GitHubにプッシュ]**
|
||||
あなたのリポジトリにプッシュします：
|
||||
```bash
|
||||
git push origin add-my-new-template
|
||||
```
|
||||
|
||||
### 5. Create Pull Request
|
||||
1. **Create PR on GitHub**
|
||||
Go to your repository page → `Pull requests` → `New pull request`
|
||||
### 5. プルリクエストを作成する
|
||||
1. **GitHubでPRを作成**
|
||||
あなたのリポジトリページに移動 → `Pull requests` → `New pull request`
|
||||
|
||||
2. **Select Branches**
|
||||
- `base repository`: pdfme/pdfme (main branch)
|
||||
- `head repository`: YOUR-GITHUB-USERNAME/pdfme (add-my-new-template branch)
|
||||
2. **ブランチを選択**
|
||||
- `base repository`：pdfme/pdfme（mainブランチ）
|
||||
- `head repository`：YOUR-GITHUB-USERNAME/pdfme（add-my-new-templateブランチ）
|
||||
|
||||
3. **Enter Information**
|
||||
- Title: `Add [My New Template] template`
|
||||
- Include brief description of template features and use cases
|
||||
3. **情報を入力**
|
||||
- タイトル：`Add [My New Template] template`
|
||||
- テンプレートの特徴とユースケースの簡単な説明を含める
|
||||
|
||||
4. **Submit PR**
|
||||
Click `Create pull request` to complete!
|
||||
4. **PRを送信**
|
||||
`Create pull request`をクリックして完了！
|
||||
|
||||
### 6. Await Merge
|
||||
After maintainer review, your template will be merged and listed officially 🎉
|
||||
(If modifications needed, you'll receive comments on GitHub)
|
||||
### 6. マージを待つ
|
||||
メンテナーのレビュー後、あなたのテンプレートがマージされ、正式に掲載されます 🎉
|
||||
（修正が必要な場合は、GitHubでコメントを受け取ります）
|
||||
|
||||
**Thank you! Your contribution makes a big impact on pdfme's community 🚀**
|
||||
**ありがとうございます！あなたの貢献はpdfmeのコミュニティに大きな影響を与えます 🚀**
|
||||
|
||||
## Need Help?
|
||||
## サポートが必要ですか？
|
||||
|
||||
If you have questions, ask with screenshots in [Discord #template-contribution](https://discord.gg/awct6DMZSf) for smooth support!
|
||||
質問がある場合は、[Discord #template-contribution](https://discord.gg/awct6DMZSf)でスクリーンショットと共に質問すると、スムーズにサポートを受けられます！
|
||||
|
||||
Reference in New Issue
Block a user