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