概要
- クライアントサイドで手軽にPDFを作成したい
- HTML上の特定テーブル（日本語表記）をそのままPDF化
jsPDFとは？
- JavaScriptを用いてPDFを作成するライブラリ
jsPDF-AutoTableとは？
- jsPDFのテーブル作成プラグイン
How to
- 1. 使用したい日本語フォント（.ttf）をダウンロード
- ここは個人の好きなフォントでOK
- 今回は Koruri という軽量日本語フォントを利用
- ここは個人の好きなフォントでOK
- 2. ここからフォントをJSファイルに変換する
- fontNameに適当な名前を入力
- fontStyleはダウンロードしたフォントのスタイルを指定
- ファイルにダウンロードしたフォントファイルttfを指定
- 3. 各種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
- jsPDF-AutoTable
- Koruri