WebアプリケーションでPDFを作成するより良い方法を見つけました！（外注納品書）

Posted date at 2024-11-24

Node.js

Libraries

title.png

　PDFの生成について、こちらの記事で紹介し、制服アプリに導入したReactPDFよりも良い方法がありましたので、共有いたします。サンプルアプリも掲載しています。

　ChatGPTo1-previewによるとこちらの方法はWeb開発会社でも採用されているようです。

🚀2024.11.26更新（外注納品書対応）

　　外注納品書に記事のライブラリを導入し開発を行いましたので、記録を残します。

〇デモンストレーション

〇追加要望の対応（製番・全件の出力切替）

〇仕様

　〇UI/UX（フロントエンド）

　　・月、社員番号の変更により、日報データを取得し、出力用データに変換する。

　　・月の初期値は、表示期間のFrom（日付）が属する月とする。

　　・社員番号の初期値は選択社員番号とする。

　　・社員番号未指定の場合はPDF作成、CSV出力ボタンが押せないようにする。

　　・PDFを作成したら、自動で別タブで開くようにする。

　　・PDFを作成したら、画面上にリンクを生成してダウンロードできるようにする。

　〇アウトプット（外注納品書PDF・作業明細CSV）

　　・制作番号毎で改ページする（外注納品書PDF）

　　・出勤、退勤時刻は日報の作業開始時刻、作業終了時刻とする

　　・定時は８時間とする

　　・合計作業時間から定時を引いた時間を残業時間とする

　　・休日は、日曜祝日とする

　　・休日の場合は定時は０とし、合計作業時間を残業時間とする

〇説明資料

explain1.png

explain2.png

explain3.png

explain4.png

🚀これまで試した実装との比較

　今回Puppeteerというライブラリを使用しました。Node.jsから実行でき、バックエンドでPDFの生成ができます。一番の利点としては、html+CSSで帳票レイアウトが組めるという点です。

　〇これまで試した実装との比較

　1.スプレッドシートで帳票を作成し、フロントエンドから呼びだす。

　　良い点：スプレッドシートで帳票が作成できる。

　　悪い点：動作が遅すぎる（ユーザがレスポンスが欲しい（結果のPDFをすぐ見たい））場合に使えない。

　2.ReactPDFを使用する。

　　良い点：PDFをデータベースに保存しなければフロントエンドのみの開発で済む。

　　悪い点：パフォーマンスがユーザの環境に依存する。html+CSSとは少し違う構文である。

　3.Puppeteerを使用する。

　　良い点：html+CSSで帳票レイアウトが作成できる。

　　悪い点：フルスタック開発になる。デプロイ先に実行環境用のモジュールをインストールする必要がある。

🚀サンプルアプリ

　ボタンクリックによりPDFが生成され、別タブに表示されます。

説明文

　

🚀Puppeteerとは

　Puppeteer（パペティア）は、Node.js環境で動作するライブラリで、Googleが開発したもので、ヘッドレスブラウザ（主にChromium）を制御するためのツールです。簡単に言えば、コードを使ってブラウザを自動操作するためのライブラリです。スクレイピングやアプリケーションのテストに使用されます。 　PDFの生成においては、ヘッドレスブラウザ上にhtmlをレンダリングし、PDF化するということをしています。これにより、html+CSSのスタイルをそのままPDF化することができます。

🚀ハマったこと

　CloudRunへのデプロイがうまくいかず苦労しました。CloudRun上でchromiumと日本語フォント（今回はGoogleフォントのNotsansJP）を使用するには、CloudRun上にパッケージとフォントのインストールが必要で、アプリの実装よりも時間がかかってしまいました。2024.11.24時点で動作している設定を記載します。

FROM node:18-slim

# 必要なシステムパッケージと日本語フォントをインストール
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
        libgtk-3-dev \
        libnotify-dev \
        libgconf-2-4 \
        libnss3 \
        libxss1 \
        libasound2 \
        fonts-ipafont-gothic \
        fonts-ipafont-mincho \
        fonts-noto-cjk \
        fonts-noto-cjk-extra \
        fonts-noto \
        fonts-freefont-ttf \
        && apt-get clean && rm -rf /var/lib/apt/lists/*

# 作業ディレクトリを作成
WORKDIR /usr/src/app

# アプリケーションの依存関係をコピー
COPY package*.json ./

# 依存関係をインストール
RUN npm install --only=production

# アプリケーションコードをコピー
COPY . .

# コンテナ起動時に実行されるコマンド
CMD [ "npm", "start" ]

🚀まとめ

　　今回、ようやくバックエンド（サーバー側）でPDFを生成するということをしました。現場日報の外注納品書作成対応から導入します。

←ホームに戻る