Pleasanter（プリザンター）でカスタム印刷ボタンを作成することは、業務効率化に役立つ便利な機能ですが、印刷設定（例えば、印刷サイズやpadding）をどう調整するかが悩ましい点です。この記事では、Pleasanterで作成した印刷ボタンに印刷設定を追加する方法について詳しく解説します。
Pleasanterでの印刷ボタンの作成方法
まず、質問に記載されたコードでは、Pleasanterのエディタに印刷ボタンを追加する処理が記述されています。このコードは、以下のように印刷ボタンを画面に追加し、ボタンをクリックした際に標準の印刷ダイアログを表示する役割を果たします。
$p.events.on_editor_load = function () {
$('#MainCommands').append($('')
.button({icon: 'ui-icon-print'}));};このコードは、エディタがロードされた後に、画面のメインコマンドバーに「印刷」ボタンを追加し、そのボタンがクリックされると、`window.print()`を呼び出してブラウザの標準印刷ダイアログを表示します。
印刷設定のカスタマイズ方法
標準の`window.print()`メソッドはブラウザの印刷ダイアログを表示しますが、印刷のレイアウトやサイズ、padding（余白）を調整するには、CSSスタイルを工夫する必要があります。
印刷時に特定のスタイルを適用するには、`@media print`というCSSメディアクエリを使用します。これにより、印刷時にのみ適用されるスタイルを指定することができます。
@media print {
body {
padding: 20px;
font-size: 12pt;
}
.no-print {
display: none;
}
}この例では、印刷時に`body`タグに20pxのpaddingと12ptのフォントサイズを設定し、`.no-print`クラスを持つ要素は印刷時に非表示にするスタイルを指定しています。これにより、印刷時の余白やレイアウトを自由に調整することができます。
印刷ボタンのカスタマイズと印刷設定の組み合わせ
上記のCSSスタイルを適用した上で、印刷ボタンをクリックした際に印刷設定を反映させるためには、ボタンの`onclick`イベントに印刷の設定を反映させる必要があります。以下のように、印刷前にページに適用する印刷設定を調整できます。
$p.events.on_editor_load = function () {
$('#MainCommands').append($('')
.button({icon: 'ui-icon-print'}));};
function customPrint() {
// 印刷前にスタイルを適用
$('body').css({'padding': '20px', 'font-size': '12pt'});
window.print();
}このコードでは、`customPrint()`関数を定義し、印刷ボタンがクリックされた際に、印刷用のスタイルを適用してから`window.print()`を呼び出しています。これにより、印刷時に指定したスタイルが反映されます。
まとめ
Pleasanterでの印刷ボタンの作成において、`window.print()`を使用することで簡単に印刷ダイアログを表示できますが、印刷設定をカスタマイズするためには、CSSの`@media print`メディアクエリを使用して、印刷時に適用するスタイルを指定する必要があります。さらに、印刷ボタンの`onclick`イベントにカスタム関数を追加することで、印刷の余白やフォントサイズなどを調整できます。これにより、より柔軟で使いやすい印刷機能を提供できるようになります。
コメント