11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

pdfmakeを使うとJSで簡単にPDFファイルを作成できますが、デフォルトのままだと日本語フォントに対応しておらず、文字化けが発生してしまいます。
pdfmakeを日本語フォントに対応させるためには、適当な日本語フォントを追加し、vts_fonts.jsを読み込ませる必要があります。

pdfmakeの基本的な使い方に関しては同じ会社のエンジニアの方が別の記事で書いているので、こちらを見てください。
JavascriptでPDFを作成する

pdfmakeのダウンロード

とりあえずpdfmakeをクローン。
クローンする場所は適当で大丈夫です。

git clone https://github.com/bpampuch/pdfmake.git

pdfmakeに日本語フォントを追加する

今回は源真ゴシック(GenShinGothic-Normal.ttf)を使用します。
pdfmakeで使用するフォントは「pdfmake/examples/fonts」に入っているので、すでに入っているフォント(Roboto-Italic.ttf、Roboto-Medium.ttf、Roboto-MediumItalic.ttf、Roboto-Regular.ttf)を削除して、代わりにGenShinGothic-Normal.ttfを入れておきます。

pdfmakeのフォント情報を更新

日本語フォントを追加したら、pdfmakeのフォント情報を更新します。

① pdfmakeディレクトリに移動

cd pdfmake

② Node.jsモジュールを更新

npm install
npm run build

ここでエラーが出る場合はnodeのバージョンが低い可能性があるので、nodeのバージョンを上げてみてください。

③ フォントの更新

gulp buildFonts

gulpを使うので、あらかじめgulpをインストールしておいてください。
ローカルのgulpを動かすためにグローバルにgulpがインストールされている必要があるみたいなので、グローバルにもgulpをインストールしておきます。

gulp buildFontsを実行すると「pdfmake/build/」に「vfs_fonts.js」がビルドされるので、これをpdfmakeに読み込ませれば日本語フォントに対応することができます。

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?