ReactでPDFを作成するライブラリを見つけました!

Posted date at 2024-08-01

React

説明文

 CodeMafiaさんのYoutube動画を視聴していたところ、ReactでPDFを作れるライブラリがあることを知ったので早速使ってみました。

 これまでもGASでスプレッドシートから生成したPDFをフロントで表示する方法や、htmlを生成してブラウザで表示する(もはやPDFではないため、手動でPDFで保存してもらう)を紹介しましたがそれよりも断然こちらが良いので、是非参考にしてみてください。


🚀やったこと

 制服の注文書を固定データでPDFにしてみる(改ページあり)

🐡アプリのURL

  ボタンクリックするとPDFが表示されます。


🚀ユースケース

 こちらの記事📒でも紹介したメール送信と組み合わせることで、ReactPDFでつくったPDFを添付したメール送信も行えます。

 例えば以下のようなケースに使えそうです。

 ・〇〇アプリ(開発したアプリ)でkintoneの最新のレコードを反映したPDFファイル(帳票)をみたい。

  PDFで保存したい。メール・チャットで送りたい。

 ・〇〇アプリで入力した結果をデータベースに保存して、同時にPDFをドライブに保存し、

  メール送信もしたい。

  ⇒制服アプリの発注(FAXの廃止)

 


 

🚀補足:これまでの方法

🐡GASでスプレッドシートからPDF生成してフロントに返す

 サービスアカウントキーを消したので動かなくなっていました。イメージだけ。。。

🐡htmlを生成して表示する(制服アプリで採用しています)


 

🚀補足:Reactのトレンド解説動画

 今回ReactPDFの発見につながったCodeMafiaさんの動画です。Reactでの開発に慣れたころ覚えていたら視聴してみてください。

 僕はReact10か月ですが、他のエンジニアの思っていることが自分と似ていてうれしかったです。ここにあるものの7割程度はどのようなものか、何を言っているかはわかりますので、気になるフックスやフレームワークがあって、とりあえずどんなものか知りたい場合や、使いどころ、アンチパターン(苦労)を聞きたい場合は少しお話しできるかもしれません。

 


🚀まとめ(感想)

 小さな試作も積み上げの一つだと思います。代わりに今日はUdemy講座ができなかったですが、良しとします。ライブラリやフレームワークはたくさんありますが、基礎をしっかりと理解していれば、ドキュメントもある程度(なんとなくこうすればいいんだな程度ですが)わかりますし、AIバフで爆速で試作ができます。

←ホームに戻る