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>

最後に

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