More than 3 years have passed since last update.

jsPDFでHTML上の日本語表記のテーブルをサクッとPDF化

Last updated at 2020-01-23Posted at 2020-01-23

概要

クライアントサイドで手軽にPDFを作成したい
- HTML上の特定テーブル（日本語表記）をそのままPDF化

jsPDFとは？

JavaScriptを用いてPDFを作成するライブラリ

jsPDF-AutoTableとは？

jsPDFのテーブル作成プラグイン

How to

1. 使用したい日本語フォント（.ttf）をダウンロード
- ここは個人の好きなフォントでOK
  - 今回は Koruri という軽量日本語フォントを利用
1. ここからフォントをJSファイルに変換する
- fontNameに適当な名前を入力
- fontStyleはダウンロードしたフォントのスタイルを指定
- ファイルにダウンロードしたフォントファイルttfを指定
1. 各種JSをHTMLにて読み込み、jsPDFを用いてPDF化処理を記述
- jspdf.min.js
- jspdf.plugin.autotable.js
- Koruri-Regular-normal.js ← ２でフォントファイルから変換したJS

<html>
  <head>
    <script type="text/javascript" src="assets/js/jspdf.min.js"></script>
    <script type="text/javascript" src="assets/js/jspdf.plugin.autotable.js"></script>
    <script type="text/javascript" src="assets/js/Koruri-Regular-normal.js"></script>
    <script>
      $(function() {
        // 縦表示が'p'、横表示が'l'
        // 用紙サイズはA4
        let doc = new jsPDF('l', 'pt', 'a4', false);
        // ここでセットしたフォントはjsPDFのtext()で指定したテキストにのみ反映
        doc.setFont('Koruri-Regular', 'normal');
        doc.text(40, 30, 'HTMLテーブルをPDF化');
        doc.autoTable({
          theme: 'grid',
          html: '#table',
          // ここでフォントの指定をしないとテーブル内部の文字が化ける
          styles: {font: 'Koruri-Regular', fontStyle: 'normal', fontSize: 12}
        });
        doc.save('table.pdf');
      });
    </script>
  </head>
  <body>
    <table id="table">
      <tr>
        <th>名前</th>
        <th>年齢</th>
      </tr>
      <tr>
        <td>ほげ</td>
        <td>20</td>
      </tr>
      <tr>
        <td>ふが</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

まとめ

クライアントサイドでPDF化する方法はいくつかあるが、いまいち日本語化対応になっていなかったり、日本語対応するやり方が複雑だったりで情報も少ない。今回のやり方が一番サクッとできそうな方法かなーと。

参考

jsPDF
- https://github.com/MrRio/jsPDF
jsPDF-AutoTable
- https://github.com/simonbengtsson/jsPDF-AutoTable
Koruri
- https://koruri.github.io/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up