明朝体や太字を使いたいので、これらのフォントを含んだvfs_fonts.jsを作って行きます。
やり方は、
git clone https://github.com/bpampuch/pdfmake
cd pdfmake
npm install grunt grunt-text-replace grunt-browserify grunt-contrib-uglify grunt-dump-dir grunt-contrib-concat
mkdir example/font/bk
mv example/font/* example/font/bk
mv *ttf example/font
grunt dump_dir

Running "dump_dir:fonts" (dump_dir) task
File "build/vfs_fonts.js" created.

と書いてありましたが・・何のことやら。

cd,mkdir,mvはLinuxのコマンドですので、その他を調べてみると、
git→プログラムソースなどの変更履歴を管理する分散型のバージョン管理システム。
npm→Node.jsのライブラリやパッケージを管理することができるツール。
grunt→Node.js上で動くタスクランナーと呼ばれる自動化ツール。
っと、Node.jsという新しい単語が出てきました(^^;
Node.js→サーバーサイドのJavaScriptインタプリタ―。

いまいちピンときませんが・・(^^;
おおざっぱにいうと、gitでpdfmakeの開発環境を取ってきて、gruntでバッチを動かしてフォントファイルを作成するようです。
これら、Linuxでは当たり前の話のようなのですが、Windowsでも環境を構築できるようです。

インストールが必要なのは、

  1. git
    これでpdfmakeの開発環境をとってきます。
  2. nodist
    Node.jsのインストールとバージョン管理をするツールです。
    管理ツールは何種類かあるようですが、評判が良いのでnodistを使います。
  3. Node.js
    nodeistを使ってインストールします。
  4. grunt

以上です。npmはNode.jsをインストールすると一緒に入ってきます。
では、順にインストールしていきます。

  1. gitのインストール
    以下のサイトからダウンロードします。
    http://git-scm.com

    00000719
    右側の液晶画像の中の「Downloads for Windows」をクリックし、ファイルを保存します。

    保存したファイルを実行するとインストーラが起動します。
    ディフォルトのまま[Next>]ボタンをクリックしていくと、無事完了しました。

  2. nodistのインストール
    以下のサイトからダウンロードします。
    https://github.com/marcelklehr/nodist/releases/

    00000841

    インストール時の最新のバージョンはv0.8.0でしたが、インストールして実行するとエラーが出てうまく動きませんでした。ので、ひとつ前のNodistSetup-v0.7.2.exeをダウンロードしました。

    保存したファイルを実行するとインストーラが起動します。
    ディフォルトのまま[Next>]ボタンをクリックしていくと、無事完了しました。

  3. Node.jsのインストール
    ここからは、コマンドプロンプトでの作業となります。

    Windowsのスタートメニューを開き、「プログラムとファイルの検索」に「cmd」と入力し、コマンドプロンプトを起動します。
    h28062801

    又は、スタートメニュー-[すべてのプログラム]-[アクセサリ]-[コマンドプロンプト]でも開きます。

    nodist依存ファイルのアップデートをします。コマンドプロンプトで、以下のコマンドを実行。
    > nodist update
    00000835

    インストールが始まりますので、終わるまで待ちます。
    00000852

    次にNode.jsの最新の安定版をインストールします。
    > nodist stable
    00000854

    どうやら最新版が入っていたようで、インストール作業はありませんでした。
    00000855

    これで、npmも使えるようになりました。

  4. gruntのインストール
    引き続きコマンドプロンプトでの作業です。

    以下のコマンドを実行します。
    > npm install -g grunt-cli
    00000856

    インストールが終わるのを待ちます。
    00000857

これで環境は整いました。

ここからが本番です(^^;;
まず、フォントを手に入れます。
フリーフォントの梅フォントを使わせていただきました。
以下のサイトから入手。
https://osdn.jp/projects/ume-font/releases/
00000858

umefont_630.7zは、見れないフォントがありましたので、umefont_610.7zにしました。
適当な場所に保存し、解凍しておきます。

と、梅フォントを使ってみたのですが、なぜか日本語が表示されませんでした。
エラーが出るわけではなく、文字が化けるわけでもなく、何故がでませんでした(T0T)
ですので、「IPAフォント」に変更しました。
https://osdn.jp/projects/ipafonts/
00000875
IPA Fonts/IPAex Fonts 4書体パック_IPAフォント(Ver.003.03)をダウンロードしました。
適当な場所に保存し、解凍しておきます。

次に、作業用のフォルダを作成。
C:\Users\ユーザー名\makeFont というフォルダにしました。
ので、コマンドプロンプトから
>mkdir makeFont
00000859
コマンドプロンプトを立ち上げたら、たいがいC:\Users\ユーザー名\に居ますから、そのままフォルダを作ってます。もし他の場所にいたら、C:\Users\ユーザー名\に移動してからフォルダを作ります。
エクスプローラから作成してもかまいません。

作ったフォルダに移動します。
>cd makeFont
00000860

gitを使って必要な環境を取得します。
>git clone https://github.com/bpampuch/pdfmake
00000861

00000863

pdfmakeというフォルダが出来ますので、そこへ移動します。
>cd pdfmake
00000864

npmを使ってgruntを作業対象ディレクトリにインストールします。
作業対象ディレクトリは、先ほど移動したpdfmakeです。
>npm install grunt grunt-text-replace grunt-browserify grunt-contrib-uglify grunt-dump-dir grunt-contrib-concat
00000865

ダダダッーとインストールされますので、終わるのを待ちます。
00000866

先ほど解凍しておいたフォントファイルをコピーします。
コマンドプロンプトでは面倒なので、エクスプローラを使います。
C:\Users\ユーザー名\makeFont\pdfmake\examples\fonts
を開きます。
00000867

5つほどファイルがありますが、[bk]というフォルダを作って、そこに移しておきます。
00000868

このフォルダに、先ほど解凍しておいたフォントファイルをコピーします。
全てのフォントをいれるとvfs_fonts.jsのサイズが大きくなりますので、必要なファイルのみを選びます。
IPAフォントの名前は、
タイプ:G=ゴシック, M=明朝
文字幅:P=プロポーショナル, 指定なし=等幅
となっています。
今回は、プロポーショナルのゴシックと明朝にします。
なので、
ipagp.ttf
ipam.ttf
この2ファイルを下記フォルダにコピーします。
C:\Users\ユーザー名\makeFont\pdfmake\examples\fonts
00000876

最後の仕上げです。gruntを使ってフォントを作成します。
コマンドプロンプトから以下のコマンドを実行します。
と、gruntが定義ファイルにしたがって自動的にvfs_fonts.jsを作成してくれます。
>grunt dump_dir
00000870

00000871

Done, without errors. 
直訳すると「エラーなしで完了!!」(^0^)v
C:\Users\ユーザー名\makeFont\pdfmake\build というフォルダに「vfs_fonts.js」というファイルが出来ています。
00000877

エディタで開いてみると、
00000878

大変なことになってますが (^^;
最初の方をみると、
window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs = {“ipagp.ttf”:”AAEAAAASAQAABAAgR0RF・・・・・

なんとはなしに、出来ているようです。
このフォントを使えば、明朝・ゴシック両方表示できるようになるはずですが、今日は疲れましたので次回にテストしたいと思います。

クライアントのJavaScriptだけでPDF作成(1)
クライアントのJavaScriptだけでPDF作成(2)
クライアントのJavaScriptだけでPDF作成(3)
クライアントのJavaScriptだけでPDF作成(4-日本語表示)
クライアントのJavaScriptだけでPDF作成(5-フォント作成)
クライアントのJavaScriptだけでPDF作成(6-日本語フォントテスト)
クライアントのJavaScriptだけでPDF作成(7-日本語帳票)
クライアントのJavaScriptだけでPDF作成(8-どうやってるのか)