react + pdfmakeでかんたん日本語PDF出力

#はじめに
reactでpdfを出力したいので、pdfmakeの利用を考えたんだけど、参考ＵＲＬを見ると日本語出力が面倒そう…。

と、思ったら意外と簡単にできたのでメモ。ttfファイルさえあればいくらでもフォントが追加出来ます。

#参考
クライアントサイドでpdfを生成できるpdfmake.jsをreactで使ってみた
クライアントサイド(React)で日本語PDFを出力する。

#準備
create-react-app　でプロジェクトを作り、pdfmakeパッケージを追加します

create-react-app testApp
cd testApp
yarn add pdfmake

pdｆmakeのモジュールディレクトリに移動して、作業ディレクトリ exsamples/fonts に日本語フォントを設置します。今回は源様明朝を使わせて頂きました。

cd node_modules/pdfmake
mkdir -p examples/fonts
cp /path/to/fonts/*.ttf examples/fonts/

フォントをコンパイルするのにgulpを使います。．事前に yarn global add gulp等でインストールしておいてください。そのままpdfmakeのディレクトリ内で

yarn install
gulp buildFonts

これで日本語フォントのインストールが終わりました。buildFontｓはもともとインストールされていたフォントを消してしまうので注意して下さい。

#実装

index.js

import React, { Component } from 'react';
import pdfMake from 'pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
class App extends Component {
  download = () => {
    pdfMake.fonts = {
      GenYoMin: {
        normal: 'GenYoMinJP-Regular.ttf',
        bold: 'GenYoMinJP-Bold.ttf',
      },
    };
    const docDefinition = {
      content: [`テスト出力`],
      defaultStyle: {
        font: 'GenYoMin',
      },
    };

    pdfMake.createPdf(docDefinition).download();
  };
  render() {
    return (
      <button onclick={()=>this.download}>ダウンロード</button>
    }
  }
}

#結局
pdfmakeでは既存のＰＤＦファイルの編集が出来ないので、お蔵入り。