Warning: count(): Parameter must be an array or an object that implements Countable in /home/sndbox/sndbox.jp/public_html/wp-includes/post-template.php on line 284
vue.js

pdfMakeのページサイズの指定はmmでは無い

  • このエントリーをはてなブックマークに追加
  • LINEで送る
rein

pdfMakeはフロント側でPDFが簡単に作れるJavaScriptです。
クライアントのPCでPDFが作れるのでサーバいらず。
日本語フォントだけ別途用意する必要があるので少し面倒ですが、それ以外の操作は簡単です。
GitHub上でも5000スターを超えており、人気の様子がうかがえます。

pdfMakeの単位はmm(ミリ)じゃないよ

A4のように、メジャーなサイズはあらかじめ用意されているため、

let pageSize = 'a4'
let docDefinition = {
  pageSize:pageSize,
  pageMargins:[0,0,0,0],
  content:content
}

のように簡単に指定できます。
しかしちょっと変わったサイズ、特に日本独自のサイズを指定するとおかしなサイズになります。
例えばハガキは100*148mm なので、

let pageSize = {
  width:100,
  height:148
}

とやると残念な結果になります。

1pt = 0.35278mm

pdfMakeで使われている単位はなんと「us pt」というもので、これは1pt = 0.35278mmになります。
なかなかわかりにくい落とし穴です。

よって pdfMakeでハガキサイズを指定するには

// ハガキサイズの指定 100 * 148mm
let hagakiSize = {
  width:283.46,
  height:419.52
}
// おまけ 長3封筒 120*235mm 
let naga3Size = {
  width:340.16,
  height:666.14
}

// さらにおまけ 長4封筒 90*205mm
let naga4Size = {
  width:255.12,
  height:581.10
}

となります。
まぁざっくり3倍くらいになるわけです。

SPAでPDFが作れるのは便利

フロントでPDFが作れるので、SPAなんかと相性がいいです。
実際にReinというPWAに組み込んでみたところちゃんと動いてくれました。
CSSでの印刷もチャレンジしましたがやっぱりCSSは限界がありますね。ブラウザによってヘッダーやフッターの制御ができず、URLや日付が入ってしまうなど、実用的なレベルにはできませんでした。その点、PDFは崩れることもなく、きれいに印刷できるので良いです。
実際にPdf Makeで作って印刷してみた結果は、Reinのページに紹介しています
実際のPDFファイルのサンプルはこちらからどうぞ

使用した日本語フォントはg_えんぴつ楷書(有料版)を使わせてもらいました。
かっこいいフォントです。そしてたった2,000円で買えるので超リーズナブル。さらに商用利用可能です。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ReinはVue.js + Firebaseで作られました

サロン向けお客様対応管理システム Reinは
Vue.js(Quasar Framework)とFirebaseを使って作成されました
サーバレスでも意外と何とかなるものです

Rein