未分類

pdfmakeでフロントエンドでPDF作成してみた(日本語フォント対応)

今回はフロントエンドでPDFを作成できるライブラリpdfmake(https://pdfmake.github.io/docs/0.1/)を紹介します。

このライブラリではテキストや画像、テーブルの挿入はもちろん、レイアウトもcssライクに調整したものをPDFとして出力して、ダウンロードや別ウィンドウで開いたりといったことが可能です。(作成例:pdfmake-sample )

デフォルトでは日本語は対応していないので、その設定方法も紹介します。

動作環境

筆者の以下の環境で検証を行いました。

Node.js 14.17.3
React.js 18.2.0
Next.js 12.2.3
pdfmake 0.2.5

pdfmakeのインストール

pdfmakeはビルドしたファイルへのパスをscriptタグに埋め込んだり、npmでインストールしてそのモジュールを呼び出して使用する方法がありますが

今回は、npmでインストールする方法を紹介します。

 

日本語フォントの設定

pdfmakeのデフォルトのフォントはRobotoなので日本語は表示できません。

なので、日本語フォントを取得して、そのフォントを使用できるように設定しなければいけません。

日本語フォント(源真ゴシック)をダウンロード

こちらのサイト(http://jikasei.me/font/genshin/)から日本語フォントをダウンロードします。

サイトの一番下に「zip形式でダウンロード」とあるので、そちらからzipファイルを取得します。

フォントを静的なファイルディレクトリにコピー

zipを展開するとGenshin...とついたファイルが大量に入っているのがわかります。

この中で「GenShinGothic-Normal.ttf」と「GenShinGothic-Bold.ttf」を静的なファイルディレクトリにコピーします。

今回はNext.jsを使用しているのでpublic/fontsディレクトリにコピーしました。

pdfmakeの使用

では実際にpdfmakeの使用例をサンプルコードを載せながら紹介します。

まずはpdfmakeをインストールする必要があります。

そして、先ほど取得した日本語フォントを読み込む設定をします。

設定が終わったら、pdfmakeを使用するラッパークラスを作成し、それを呼び出す部分を合わせて実装します。

ラッパークラス(utils/pdf.ts)

このクラスをページのボタンクリックで呼び出してPDFをダウンロードできるようにします。

pages/index.tsx

コードの解説

pdfmakeでPDFを生成するざっくりとした手順は

  1. documentDefinitionsを定義
  2. documentDefinitionsのcontentに出力したい内容を格納
  3. pdfMake.createPdf(documentDefinitions)でPDFのオブジェクトを作成
  4. pdfMake.createPdf(documentDefinitions).open()で別タブで開く、pdfMake.createPdf(documentDefinitions).download()でダウンロード

となっています。

サンプルコード(utils/pdf.ts)ではクラスの初期化時にdocumentDefinitionsを作成して、setParagaphやsetTableなどのメソッドを通じてcontentのアイテムを追加しています。

そして、出力するタイミングでgenerateを呼び出してダウンロードしています。

documentDefinitionsの定義は公式(https://pdfmake.github.io/docs/0.1/document-definition-object/)を参考にすると良いと思います。

まとめ

  • pdfmakeはフロントエンドでPDFを生成できるライブラリ
  • 日本語フォントはデフォルトではないので、源真ゴシックをダウンロードして使用できるように設定が必要
  • documentDefinitionsのオブジェクトをもとにPDFを生成する
  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-未分類

© 2022 Shiro's secret base