こんばんは。
いろいろ検索してみたものの、思うような結果が得られず
ご存知の方がいらっしゃったら教えて頂きたいです。
Bubbleで帳票出力を実装したいです。
テーブル(タイプ)に登録されているデータを一覧形式で出力したいです。
欲を言えば重複行を省いたり、罫線の表示非表示も変えたい…。
今は以下のようにしています。
出力ボタン押下時に
①テーブルのデータをRepeating Groupで表示
②JavaScriptで「ページを印刷」の処理を走らせる(ここで自分でPDF出力に設定して印刷)
これを出力ボタン押下時に直接PDFで出したいのですが
やはりBubble側で出力するデザインで表示させて
PDFのプラグインを使用してそのページをPDF化する感じでしょうか?
一覧形式のデータをPDF出力されたことがある方は
どのような方法で出力したのか教えて頂きたいです。
よろしくお願いいたします。
「いいね!」 1
Bubbleのテーブル出力はかなりクセがあるので、プラグインによっては正常に動作しない可能性があることを前提として、自分が使用しているプラグインが便利なので説明します。
「Bubble Page to PDF converter」というプラグインが、ページ全体・一覧リストなどを出力するのに非常に便利です。
▼こちら
No-code app templates & plugins for Bubble, courses, backends, webview packages for native apps. Now you can build apps without code even faster
基本的には非表示のConvert to PDFエレメントを画面内に配置し、出力したい要素が含まれるエレメントにIDを設定します。
上記のプラグインで設定したIDをターゲットとして出力を行えばPDFとしてデータがダウンロードできるようになります。これだけでBubbleの見た目通りのPDFが出力可能です。
気をつけないとならないのはページネーションは考慮されないためリストが長い場合は変なところでPDFが切れてしまう(次のページになってしまう)ことがあるので、Bubbleの画面設計にて上手い方法を考える必要があります。
例えば、複数ページに渡ることが確定の場合は、IDをあらかじめ分割して収まるようにしておくなど。
Javascriptの実装技術があるレベルであれば、紹介したURLのエディタを見れば実装方法もわかるのではと思います(もし不明点あればフォローします)。
「いいね!」 3
詳しくありがとうございます!!
なるほど。
やはりBubble側で理想のデザインを完成させた上で
見た目通りのPDF出力をする、ということになるのですね。
注意点も書いてくださってありがとうございます。助かります。
まずはPDFにしたい理想のページをがんばって作って
そこからご紹介頂いたプラグインを使ってみます!!
ご丁寧にありがとうございました^^
「いいね!」 2
僕はこちらのツールを使って、Bubbleにページデザインを構築しないでもpdfを出力できるようにしています。
「いいね!」 6
ケイタロウさん
PDFMonkey初めて聞きました!
Bubbleにデザインを構築せずにPDFが出力できるんですね
やりたいことを実装しようと思うたびに知らないプラグインと出会いますが
めっちゃ勉強になります。ありがとうございます。
yukikunさんにご紹介いただいたプラグインと両方見てみて
今回実装したいことの表示スピードや、やりたいことができるか、金額面など
総合的に考えて判断させていただこうと思います。
有益な情報をありがとうございました!^^
「いいね!」 2
はい!
ただこちらの場合はプラグインはないので、ご自身でAPI連携 & pdfmonkey側でテンプレの作成(HTML,CSS)をする必要があります!
詳しくは僕も @TaishoKondo さんに依頼して作成してもらったので、構築でおご質問あれば僕かタイショウさんへ!笑
「いいね!」 4
なるほど!承知いたしました!!笑
ありがとうございます
「いいね!」 2