モチベーション
ElectronではwebContents.print()関数やwebContents.printToPDT()関数を使って簡単に印刷やPDF作成ができます。この時、CSSで印刷サイズをmm等の実物長さで指定することで、実際の印刷時の各種要素の大きさを指定できるので便利です。が、注意しないと余分な余白が入ってしまいます。経験則からくる注意点を情報共有します。
注意点
- CSSで
paddingやmarginを正しく設定する。特に設定しない時は、明示的に0mmを設定すること。デフォルトでは0mmでないことがある。 - body要素にも
paddingとmarginを明示的に設定する事。実際に余分な余白が消えずに悩みましたが、body要素のmarginがデフォルトで0mmではなかったことが原因でした。 - 印刷時だけ設定したいCSSは
@media print項目で設する
例
body要素の中にdiv要素があり、その中に文章が書かれている場合のCSS記述は次のようになります。
@mediaprint{body{padding:0mm;margin:0mm;/* これが無いと余分な余白が入る */}div{padding:0mm;width:180mm;/* 用紙幅はA4(210mm)を仮定して余白を引いたもの*/margin-left:15mm;/*左右の余白15mm*/margin-right:15mm;margin-top:20mm;/*上下の余白20mm*/margin-bottom:20mm;}}雑感
Electronの印刷はとても楽でいいですね。CSSで微調整できるところも素敵です。すごい時代になってますね。
子供の頃、親父にPCを買ってもらった際、弟と協力して年賀状印刷ソフトを作ったのを思い出しました。当時はVisual Basic6で印刷物の位置合わせをするのに苦労しました。
