WEB技術の一手!自動でPDFが出力できる!

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. WEB技術の一手!自動でPDFが出力できる!

WEB技術の一手!自動でPDFが出力できる!

WEB技術の一手!自動でPDFが出力できる!

PDF資料を作成する際に使用するソフトといえば、真っ先に思い浮かぶのはデザインに使う定番のソフトではないでしょうか。
書籍のレイアウトに強い「InDesign」、グラフィックデザインの王道ツール「Illustrator」などを使えば、簡単に作成したデザインをPDFに書き出すことが可能です。

しかし、同じデザインのテンプレートを使って、データだけを入れ替えて大量に資料を作成する場合には、いちいちデザインデータを開き、データを貼り付けて書き出すのは、すごく手間が掛かります。。。しかも、このような作業を人間の手で行うと、ミスが起きやすいです。

そこで、今回はWEB技術の力を借りて、自動的にPDFを書き出す方法をご紹介します。

HTMLをPDFに変換する

考え方としては、レイアウトをHTMLCSSで作成し、そのデータを専門のライブラリを使ってPDFに変換します。
今回は「Laravel」というPHPプログラムのフレームワークで、「dompdf」というライブラリを使用します。

dompdfのインストール

dompdfのインストールは簡単!以下のワンコマンドでOKです!

インストールした「dompdf」サービスを呼び出せるようにするため、「app\config\app.php」ファイルの「providers」配列に以下を追加します。

そして、簡単に呼び出せるよう、「aliases」配列に以下のように別名で指定します。

以上が「dompdf」を使うための準備になります。

URLルートの指定

次に、PDFの書き出しを行うルート、処理を書くコントローラーなどを指定します。

テンプレートファイルの作成

続いて、PDFを書き出すためのベースとなるテンプレートを作成します。

Controllerで処理を実装する

最後に、PDFの書き出し処理をControllerで実装します。

日本語対応

「dompdf」自体は日本語に対応していません。
現状では、日本語の部分が「文字化け」してしまいます。
そのため、日本語の外部フォントを読み込む必要があります。

以下のサイトからIPA明朝・ゴシックをダウンロードします。
https://moji.or.jp/ipafont/ipa00303/

ダウンロードしたフォントファイルを「storage/fonts/」フォルダに入れます。

そして、@font-faceを使ってフォントを読み込みます。
headタグに以下のように指定します。

なお、実際のクラス設定で、font-weightをnormal以外で指定すると、再び文字化けしてしまいますので、@font-faceで「font-weight: 600」のバージョンを指定する必要があります。

CSS対応

また、外部CSSを以下のようにヘッダータグで設定すると、CSSが全く効きません。

routeの指定方法では、dompdfはうまく認識しないので、dompdfライブラリにCSSを識別させるため、routeではなく「public_path」を使う必要があります。

 出力PDFのサイズや向き

デフォルトでは、PDFが縦向きで出力されます。横向きで出力したい場合は、以下のようにコントローラーに追記します。

以上がdompdfの使用説明になります。
コントローラーで、繰り返し処理を合わせて使うと、ボタンを押すだけで、指定したデザインにデータを貼り付けてPDFデータを書き出してくれます。

今回ご紹介した方法では、HTMLからPDFに変換することは簡単ですが、やはり正確さや細かさは足りません
より正確に書き出したい場合は、さらに専門的な手段が必要ですね。

まとめ

私たちには馴染み深いWEB技術。うまく応用することで、いろんな問題を解決し、便利にすることができます。
このようなことを考え、使いこなすことが、WEB制作の楽しさではないでしょうか。

これからも、WEB技術を使ってさまざまな課題に挑戦していきたいです。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら