The demo editor is available at the following URL: https://bubble.io/page?id=demo-pdf-converter&tab=Design&name=index

Here are the detailed usage instructions:

1. Installing the Plugin

First, install the "PDF Converter" plugin in your Bubble app.

Access the Bubble editor.

Open the "Plugins" tab.

Click the "Add plugins" button.

Type "PDF Converter" in the search bar to find the desired plugin.

Click the "Install" button to complete the installation.



2. Place a Button on the Page You Want to Convert to PDF

Add a button (or other action-triggering element) to the page you want to convert to PDF.

Open the "Design" tab.

Drag and drop a "Button" or other trigger element onto the page.


3. Creating a Workflow

Set up a Workflow to execute the PDF conversion when the button created in step 2 is clicked.

Click on the button created in step 2, then click "Edit Workflow"

Click "Click here to add an action..."

Select "Plugins" → "Convert To PDF"



4. Adjusting Settings

The "Convert To PDF" action has the following settings. Please set appropriate values according to your needs:

- margin_top (default: 0) - PDF top margin

- margin_left (default: 0) - PDF left margin

- margin_bottom (default: 0) - PDF bottom margin

- margin_right (default: 0) - PDF right margin

- orientation (default: portrait) PDF orientation

 - portrait

 - landscape

- size (default: a4) Sets the PDF paper size

 - a3

 - a4

 - b4

 - b5

- filename (default: document) File name

 - Can set dynamic values

After completing the settings, test the PDF conversion by executing this action on the button click event.



5. Execute the Workflow

To execute the PDF conversion, click the button to trigger the Workflow.

Run the app in Preview mode.

Click the configured button.

The PDF conversion process will begin.



6. Saving the PDF

According to the settings, the PDF will be saved in one of the following ways:

Automatically downloaded (if "Download Automatically" is enabled).

A URL for the PDF file is generated, allowing for later download.

This completes the steps for implementing PDF conversion functionality in your Bubble app.




日本語:

デモのエディターは下記URLとなっております。
https://bubble.io/page?id=demo-pdf-converter&tab=Design&name=index

以下は、具体的な利用手順です。

1. プラグインのインストール

まず、Bubble アプリに「PDF Converter」プラグインをインストールします。

Bubble のエディタにアクセスします。

「Plugins」 タブを開きます。

「Add plugins」 ボタンをクリックします。

検索バーに 「PDF Converter」 と入力し、目的のプラグインを探します。

「Install」 ボタンをクリックしてインストールを完了します。



2. PDF にしたいページにボタンを配置する

PDF に変換したいページを表示している画面に、PDF 変換を実行するためのボタン（またはその他のアクションを発火できる要素）を追加します。

「Design」 タブを開きます。

「Button」 または他のトリガーとなる要素をドラッグ＆ドロップでページに配置します。


3. Workflow の作成

2 で作成したボタンをクリックした際に PDF 変換が実行されるように Workflow を設定します。

2で作成したボタンをクリックして、「Edit Workflow」をクリック

「Click here to add an action...」 をクリックします。

「Plugins」 → 「Convert To PDF」 を選択します。



4. 設定項目の調整

「Convert To PDF」アクションには、以下の設定項目があります。用途に応じて適切な値を設定してください。

- margin_top (デフォルト: 0) - PDF の上部余白

- margin_left (デフォルト: 0) - PDF の左側余白

- margin_bottom (デフォルト: 0) - PDF の下部余白

- margin_right (デフォルト: 0) - PDF の右側余白

- orientation (デフォルト: portrait) PDFの向き

 - portrait (縦向き)

 - landscape (横向き)

- size (デフォルト: a4) PDF の用紙サイズを設定します。

 - a3

 - a4

 - b4

 - b5

- filename (デフォルト: document) ファイル名 (Filename)

 - 動的な値を設定可能 (Dynamic value)

設定が完了したら、ボタンのクリックイベントでこのアクションを実行し、PDF 変換をテストしてください。



5. Workflow を実行する

PDF 変換を実行するために、ボタンをクリックして Workflow を発火させます。

プレビュー（Preview） でアプリを実行します。

設定したボタン をクリックします。

PDF 変換のプロセスが開始されます。



6. PDF の保存

設定に従い、PDF は以下のいずれかの方法で保存されます。

自動でダウンロードされる（「Download Automatically」が有効な場合）。

PDF ファイルの URL が生成され、後でダウンロード可能。

これで、Bubble アプリで PDF 変換機能を導入する手順は完了です。