「Bubble Page to PDF converter」を使ってPDFを生成する方法【Bubble】

BubbleアプリでPDFを生成する必要がある場面は多々あります。請求書の発行、契約書のダウンロード、レポートのエクスポートなど、幅広い用途が考えられます。今回は、「Bubble Page to PDF converter」という有料プラグイン(買い切り$100)を使って、Bubble上で作成したウェブページをPDFに変換する方法をご紹介します。

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

  1. Bubbleエディターで「プラグイン」タブを開く
  2. 検索窓に「PDF」と入力して該当プラグインを選択して、インストールする

PDFに変換するページの設定

  1. PDFに変換したいページを開く
  2. そのページのエレメントをPDFに適した形で編集する(レイアウト、フォント、余白など)
    • この時に表示するデータを動的にしたい場合は、前ページの「Go to page ~」のアクションでこのページにデータを送る必要があります。
  3. ConvertertoPDFエレメントをページに配置する

PDFの生成

  1. PDFに変換したいページでワークフローを作成する
  2. イベントの中から「Page is loaded」を選択
  3. アクションから「Generate PDF a Converter to PDF」を選択
    • 2のように設定することで、ページを開くと自動でPDFを生成してくれます。
  4. 画像のように、 PDFのサイズ・余白、PDFのファイル名、さらにPDFを生成後に自動でダウンロードできるように設定することも可能です。今回は、Upload File to AWSにチェックを入れて、画像がAWSに保存されるように設定します。

生成したPDFをブラウザで開く

  1. 新たなイベントを追加し、「A Converter to PDF Uploading to AWS is finished」を選択
    • これは、先ほおのPDFが生成されAWSにアップロードされたらアクションを開始するとなります。
  2. 続いて、PDFをブラウザで開くためにアクションから「Open an external website」を選択
    • こうすれば生成したPDFを表示できるようになります。また、「Open in new tab」にチェックを入れると現在開いているブラウザとは別に、新たにブラウザを立ち上げてくれるので非常に便利です。

上記のように設定することでPDFを生成し、ブラウザでPDF viewerを立ち上げることができます。右上の各ボタンからプリントアウトやダウンロードをすることが可能です。

構築したBubbleページを、このプラグインを使えばほんの数ステップでPDFに変換できます。請求書やレポートなど、用途に合わせてPDFとしてエクスポートすることができます。ぜひ活用してみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です