![](http://atombase.co.jp/wp-content/uploads/2023/10/accent.jpg)
BubbleアプリでPDFを生成する必要がある場面は多々あります。請求書の発行、契約書のダウンロード、レポートのエクスポートなど、幅広い用途が考えられます。今回は、「Bubble Page to PDF converter」という有料プラグイン(買い切り$100)を使って、Bubble上で作成したウェブページをPDFに変換する方法をご紹介します。
プラグインのインストール
- Bubbleエディターで「プラグイン」タブを開く
- 検索窓に「PDF」と入力して該当プラグインを選択して、インストールする
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.36.12-1024x805.png)
PDFに変換するページの設定
- PDFに変換したいページを開く
- そのページのエレメントをPDFに適した形で編集する(レイアウト、フォント、余白など)
- この時に表示するデータを動的にしたい場合は、前ページの「Go to page ~」のアクションでこのページにデータを送る必要があります。
- ConvertertoPDFエレメントをページに配置する
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.39.47-1024x561.png)
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.38.48-1024x563.png)
PDFの生成
- PDFに変換したいページでワークフローを作成する
- イベントの中から「Page is loaded」を選択
- アクションから「Generate PDF a Converter to PDF」を選択
- 2のように設定することで、ページを開くと自動でPDFを生成してくれます。
- 画像のように、 PDFのサイズ・余白、PDFのファイル名、さらにPDFを生成後に自動でダウンロードできるように設定することも可能です。今回は、Upload File to AWSにチェックを入れて、画像がAWSに保存されるように設定します。
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.46.03-2-1024x595.png)
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.48.08-499x1024.png)
生成したPDFをブラウザで開く
- 新たなイベントを追加し、「A Converter to PDF Uploading to AWS is finished」を選択
- これは、先ほおのPDFが生成されAWSにアップロードされたらアクションを開始するとなります。
- 続いて、PDFをブラウザで開くためにアクションから「Open an external website」を選択
- こうすれば生成したPDFを表示できるようになります。また、「Open in new tab」にチェックを入れると現在開いているブラウザとは別に、新たにブラウザを立ち上げてくれるので非常に便利です。
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.51.51-1024x497.png)
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.51.14-1024x480.png)
上記のように設定することでPDFを生成し、ブラウザでPDF viewerを立ち上げることができます。右上の各ボタンからプリントアウトやダウンロードをすることが可能です。
![](https://atombase.co.jp/wp-content/uploads/2024/03/ScreenShot-2024-03-22-15.59.35-1024x585.png)
構築したBubbleページを、このプラグインを使えばほんの数ステップでPDFに変換できます。請求書やレポートなど、用途に合わせてPDFとしてエクスポートすることができます。ぜひ活用してみてください。