JavascriptでPDFを作成する

#javascriptでPDFを出力する

##利用ツール
pdfMake

##手順
###①pdfMakeをダウンロードしてくる
https://github.com/bpampuch/pdfmake
※上記からcloneしてきても、zipでダウンロードしてきてもOK

###②日本語化フォントを取得

https://github.com/naoa/pdfmake
から日本語化フォント取得

日本語化フォントのある場所は、buildフォルダ内にあります。

naoa様が日本語化のフォントを作成してくださっています。
http://blog.createfield.com/entry/2015/12/16/052221
ipagp.tff等のフォントを利用して作成してもいいのですが、個人的には
naoa様が作成しているフォントセットを利用することをお勧めします。

ipagp.tffなどのフォントセットは、フルで日本語フォントが入っているため、
容量も5MBとかなり大きいものとなっています。
クライアントサイドで何度も読み出すことを考えると、ちょっと重いなーと。。。

naoa様のフォントセットは、あまり利用回数が多くないものを除外し、2M強までシェイプアップしてくれています。
クライアント側で動かすことを考えるとかなり嬉しいシェイプアップ。
利用して、対応できなければフルのフォントセットを利用する。ぐらいでいいのではないでしょうか？

追記
上記のフォントセットを利用させて頂きましたが、要件で、日本語フォントの数字（１　２）などが文字化けしてしまう問題を受けて、
フルフォントセットを利用する方法を自社のエンジニアが記載してくれました。
→pdfmakeの日本語対応

###③JSのソースにフォルダを作成

今回はこんな感じの構成にしました。

PJフォルダ
　└── js
　　└──pdfMake
　　　└──pdfmake.min.js
　　　└──vfs_fonts.js

　└─sample.html
　　　　　※ここにnaoa様のvfs_font.jsを置く

###④pdfMakeを読み込み

sample.html

      <!-- OutPutPDF -->
      <script src="./js/pdfmake/pdfmake.min.js"></script>
      <script src="./js/pdfmake/vfs_fonts.js"></script>

###⑤PDF出力処理を記載

sample.html

      <script>
          //日本語フォント読み込み
          pdfMake.fonts = {
            GenShin: {
            normal: 'GenShinGothic-Normal-Sub.ttf',
            bold: 'GenShinGothic-Normal-Sub.ttf',
            italics: 'GenShinGothic-Normal-Sub.ttf',
            bolditalics: 'GenShinGothic-Normal-Sub.ttf'
            }
          };
          //PDF作成処理
          var docDef = {
            content:[
              {text: "Hellow World", fontSize: 20}
            ],
            defaultStyle: {
              font: 'GenShin',
            },
          };
          pdfMake.createPdf(docDef).download("出力テスト.pdf");

      </script>

###最後に
手軽に導入できるので、
利用してみればいいかもです。