📜

Excelから注文書・請求書を自動生成するWebツールを作成

に公開
React
tech

はじめに

社内用に毎月、稼働表から
注文書・注文請書・請求書を作成する事務用ツールを作ってほしいとのことで、
Excelを読み込んで帳票(PDF/Excel)を自動生成するWebツールを作りました。

実際に事務の人に使ってもらいながらフィードバックを受け
開発もスムーズに進みましたので紹介します。

作ったもの

Excelの稼働表をアップロードすると、以下をワンクリックで出力できるツールです。

  • 注文書（PDF/Excel）
  • 注文請書（PDF/Excel）
  • 請求書（PDF/Excel）

対応している機能

  • Excelの複数シートから参照シートを選択
  • 要員を選択して個別帳票を出力
  • 請求書は複数人まとめて合算
  • タイトル・担当名などの帳票設定をツールから変更可能

技術スタック

  • フロントエンド: React + TypeScript
  • Excel読み込み: xlsx
  • PDF/Excel出力: pdf-lib xlsx
  • フォント埋め込み: NotoSansJP / RobotoMono
  • ビルド: Vite

工夫したポイント

基本的にコンパクトで分かりやすくシンプルに収めようと、ステップごとに区切りを分かりやすくしたり、重要なボタンは目立ちやすく色分けし設計しました。

帳票テンプレは既存のPDFをそのまま利用、
PDFをテンプレとして読み込み、pdf-libで座標指定し、文字を描画しました。

出力結果



デプロイ先

デプロイ先は、Vercelを使いました。
Vercelは、React/Next.jsなどのフロントエンドを設定ほぼゼロでデプロイできるクラウドサービスでGitHubにpushするだけで自動デプロイされ、urlも即発行されます。

デプロイ手順

  1. Vercelにアクセス(https://vercel.com/)
  2. GitHubアカウントでログイン
  3. 表示に従ってリポジトリ連携を許可
  4. ダッシュボードの「New Project」をクリック
  5. デプロイしたいリポジトリを選択
  6. Framework Presetを選ぶ

あとはDeployボタンを押すだけで、Githubにpushするだけで、自動デプロイされます！

まとめ

今回ツールを作ってみて、値を入れるときに、Excelだとセル番地を設定するだけで済みましたが、PDFの場合が座標を表示させ地道に値を合わせていく作業が大変でした。。
また注文書と請求書でロジックが微妙に違うため、注文書の場合一人分で良かったが請求書の場合は複数人対応させることや計算結果など、似てるけど微妙に違う点が一番バグを生みやすかったです。
以上の点を踏まえ修正を加えながら自社開発で実際に使われるツールにできたのが一番の収穫でした。

Discussion