WEB制作(html・css(スタイルシート))に関する各種メモ書き

JavaScriptでWEBページの印刷ボタンを作る

● JavaScriptで印刷ボタンを作る

・印刷リンク

<a href="#" onclick="window.print(); return false;">印刷する</a>

・印刷ボタン

<input type="button" value="印刷する" onclick="window.print();">

● cssで印刷するときに要素を隠す

印刷するときだけ隠したい要素がある場合は以下のようにして隠します

@media print{
    .no_print{
        display: none;
    }
}
<p class="no_print">この要素は印刷時に表示されません</p>

● cssで印刷するときに線を消す

印刷するときに要素自身は隠さず、線だけ消したい時は以下のようにして消します

.my_class{
    border: 1px solud red;
}

@media print{
    .no_border_print{
		border: none;
    }
}
<div class="my_class no_border_print">このDIVの枠は表示されません</div>

● WEB画面印刷時の用紙サイズを指定する( GoogleChromeで有効 )

A4 縦の場合

css

@page {
  size: A4 portrait;
  margin: 10mm;
}

A4 横の場合

css

@page {
  size: A4 landscape;
  margin: 10mm;
}
No.1146
11/13 14:55

edit