javascript で作る html から PDF 変換 pdfmake の日本語対応 pdfmake はブラウザー側で pdf 作成可能な javascript ライブラリです。デフォルトでは日本語未対応ですが、フォントを導入すると日本語文字化けなしできれいに作れます。 ブラウザー側に javascript だけで PDF 作成するときのメモまとめました。
日本語対応:無料フォント IPA フォント使う 無料のフォントを探していたが、一部漢字対応しているけど、全角記号対応してないフォントもありましたが、最終的に IPA フォントにしました。
IPA フォントは 情報処理推進機構 IPA が作った仕様
複製
配布
フリーの無料フォントです。
パック詳細 :IPA フォント(IPA フォント 4 書体パック) IPAfont00303.zip
はじめにお読みください Readme_IPAfont00303.txt IPA フォントライセンス v1.0 IPA_Font_License_Agreement_v1.0.txt IPA ゴシック ipag.ttf IPA P ゴシック ipagp.ttf IPA 明朝 ipam.ttf IPA P 明朝 ipamp.ttf ダウンロード IPA フォント(IPA フォント 4 書体パック)(opens new window)
その他の IPA フォント
pdfmake の初期設定 github からレポジトリダウンロードして使うことも可能ダウンロード(opens new window)
npm からインストールする場合 javascript 出来上がり 必要なパッケージ読み込んで、content いじって、吐き出す流れになります。 細かい設定は style や margin で調整
使用可能な属性プロパティ Property スタイル系 Style 項目 型 その他 font
String fontSize
Number lineHeight
Int bold
Boolean italics
Boolean 斜体 alignment
String left
center
right
justify
color
String background
String markerColor
String decoration
String underline
lineThrough
overline
decorationStyle
String dashed
dotted
double
wavy
decorationColor
String )
マージン Margin margin
:[
左,上,右,下]
margin
:[
左右,上下]
margin
: 左右上下
カラム Columns 2分等表示3分等表示段落分等表示する際に使えます。
テーブル Table テーブルはちょっとした癖がありますが、なれたら使いやすくなってます。
リスト List HTML タグのul
ol
みたいにリスト作成
画像 Image SVG HTML タグのimg
みたいなもの、ブラウザーなら base64 エンコードデータにする必要があります。
リンク Link HTML のa
タグみたいなもの
QR コード シンプルに一行だけで QR コード作れます。
オプション & プロパティ
項目 必須 備考 qr 必須 text in QR code foreground optional background optional fit optional version optional eccLevel optional 可能値:L
M
Q
H
デフォルトL
mode optional 可能値:numeric
alphanumeric
octet
mask optional
HTML から変換してくれるツール htmlToPdfmake pdfmake 詳しく学習しなくても html で変換してくれるツールがあります。
pdfmake Document(opens new window) pdfmake Playground(opens new window)
Uncaught (in promise) File 'ipagp.ttf' not found in virtual file system Uncaught (in promise) File 'ipagp.ttf' not found in virtual file system
エラーメッセージが出ったipagp.ttf
ファイルがないことが原因で、gulp でフォント再ビルドする必要があります。vfs は virtual file system の略かなあ?
pdfmake/build/vfs_fonts.js 設定して上げれば問題解決