JavaScriptでクライアントサイドだけで日本語PDF出力する

クライアントサイドでPDF出力できればサーバ負荷軽減できていいなぁとか考えることがあると思います。

そんなときは、 bpampuch/pdfmake · GitHub に日本語フォントを導入することにより 日本語でクライアントサイドだけでPDF出力することができます。

NotoSansを使おうと思ったのですが、otf形式でttfに変換してもうまく動きませんでしたので、以下の源真ゴシックのttfファイルを利用させてもらいました。

jikasei.me

ただ日本語のフォントは非常にサイズが大きく１つの太さの種類で5Mバイト以上あります。

これでは、クライアントサイドにやらして負荷を下げられればいいなという目論見よりも通信負荷の方が問題になってしまいます。

そこで、あまり使われない漢字等を省いてサブセット化して容量を減らします。 こちらを利用させてもらいました。

サブセットフォントメーカー

とりあえずNormalだけですが、2.2Mほどになりました。 もう少し減らせるかもしれません。

pdfmakeでこのフォントを使って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.

こちらのフォークではサブセットした源真ゴシックでjsを生成済みです。

naoa/pdfmake · GitHub

pdfmakeと生成されたbuild/vfs_fonts.jsを読みこませれば日本語でpdf出力することができるようになります。

  pdfMake.fonts = {
    GenShin: {
      normal: 'GenShinGothic-Normal-Sub.ttf',
      bold: 'GenShinGothic-Normal-Sub.ttf',
      italics: 'GenShinGothic-Normal-Sub.ttf',
      bolditalics: 'GenShinGothic-Normal-Sub.ttf'
    }
  }
  defaultStyle = 'GenShin'

  docDefinition = {
    content: '日本語テスト',
    defaultStyle: {
      font: defaultStyle
    }
  }
  pdfMake.createPdf(docDefinition).open()
  pdfMake.createPdf(docDefinition).download()

ちょっと前に調べたときには日本語できなくて残念だなぁと思ったことがあって、今回また調べたら実現できたので情報を残しておきます。