Help us understand the problem. What is going on with this article?

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

概要

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

jsPDFとは?

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

jsPDF-AutoTableとは?

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

How to

  • 1. 使用したい日本語フォント(.ttf)をダウンロード
    • ここは個人の好きなフォントでOK
      • 今回は Koruri という軽量日本語フォントを利用
  • 2. ここからフォントをJSファイルに変換する
    • fontNameに適当な名前を入力
    • fontStyleはダウンロードしたフォントのスタイルを指定
    • ファイルにダウンロードしたフォントファイルttfを指定
  • 3. 各種JSをHTMLにて読み込み、jsPDFを用いてPDF化処理を記述
    • jspdf.min.js
    • jspdf.plugin.autotable.js
    • Koruri-Regular-normal.js ← 2でフォントファイルから変換した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化する方法はいくつかあるが、いまいち日本語化対応になっていなかったり、日本語対応するやり方が複雑だったりで情報も少ない。今回のやり方が一番サクッとできそうな方法かなーと。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした