画面を印刷するボタンを設置する

対面授業のお客さんが「そうちゃ式」をプリントアウトしているのを見かけるので

プリントアウトして、チェックシートで隠して使えるような素材をイメージして作成してみる

印刷専用のCSS

コチラコチラコチラを参考に

印刷ボタンの参考記事

コチラ[v]コチラ[v]は基本的なメソッド

コチラ[ ]コチラ[ ]は範囲限定など細かくて参考になる

コチラは試行錯誤の過程

コチラではjqueryの印刷用のプラグインを紹介してる

コチラは少し変わった手法、コチラ、

基本手法

画面1枚で完結する文書を単純に印刷したいような場合

画面全体を印刷する

htmlはこう
<button class=”print01″>印刷</button>
<p>(印刷内容)</p>

jQueryはこう
$(function(){
$(‘.print01’).click(function(){
window.print();
});
});

試しに↓

作動を確認(CSSは無くても作動する)

ボタン01結果

作動結果

メイン領域だけを印刷

ヘッダー・フッターなどを印刷範囲から除く

クラス「print02」を指定したボタンを設置

jQueryはこう
$(function(){
$(‘.print02’).click(function(){
let header = $(‘header’),
footer = $(‘footer’);
header.hide();
footer.hide();

window.print();

header.show();
footer.show();
});
});

一時的にヘッダーとフッターを非表示にして、印刷後に再表示させている。

試しに↓

作動を確認

ボタン02結果

ヘッダーが印刷されていない

指定した対象を隠す(1)

jQuery側で隠すクラスを指定する手法

jQueryはこうだが(javaでプリントしているので一部違う)
$(function() {
// 隠したい要素
var hideSelector = “.p-1, .p-3”;

// 印刷前のイベント
window.onbeforeprint = function() {
// 要素を非表示
$(hideSelector).hide();
}

// 印刷後のイベント
window.onafterprint = function() {
// 要素を表示
$(hideSelector).show();
}
});

自分で改造したjQuery
$(function() {
$(‘.print03’).click(function(){
var hideSelector = “.p-1, .p-3”;
$(hideSelector).hide();

window.print();

$(hideSelector).show();
});
});

隠す(p-1)

残す(p-2)

隠す(p-3)

残す(p-4)

試しに↓

結果(拡大)

ボタン03結果

p-1,p-3は隠れている

確かにp-1とp-3は消えているね

指定した対象を隠す(2)

CSS側で印刷時に隠すクラスを一つ定めて、jQuery側で重畳クラスとして追加する手法で、CSSが必要になる

CSSは、こう
@media print{
.not-print{display:none}
}

jQueryは、こう
$(function(){
//非表示にしたい要素
var hide_elm = $(‘.header,.footer,.sidebar’);
//ボタンをクリック
$(‘print04’).click(function(){
//非表示
hide_elm.addClass(‘not-print’);
//印刷
window.print();
//元に戻す
hide_elm.removeClass(‘not-print’);
});
});

試しに↓

うまく作動していない?

応用手法

もう少し応用的な手法

指定したエリア以外を隠す

コチラの手法。概要は以下

印刷したい範囲を「print-area」等のクラス名を付けたdivで囲んでおく。

ボタンを押すと「print-area」をコピーして、新しくappendしたプリント用の要素「#print」内に挿入する。

#print以外を非表示にして印刷を行った後、#printをremoveして、非表示にしていた要素を表示して終了

非表示にする要素に付加するCSSクラス
.print-off {display: none;}

jqueryはこう
$(function(){
$(‘.print-btn’).on(‘click’, function(){

var printArea = document.getElementsByClassName(“print-area”);//印刷エリアの内容を取得

$(‘body’).append(‘<div id=”print” class=”printBc”></div>’);//プリント用の要素「#print」を作成
$(printArea).clone().appendTo(‘#print’);//「#print」にprintAreaのクローンを子要素として入れる(クローンしないとprintAreaそのものが移動する?)

$(‘body > :not(#print)’).addClass(‘print-off’);//プリントしたいエリア(#print)以外に、非表示用のcssクラス「print-off」を追加

window.print();//印刷

$(‘#print’).remove();//作成した「#print」を削除
$(‘.print-off’).removeClass(‘print-off’);//非表示用のclass「print-off」がある要素から「print-off」を除去

});
});

試しにやってみる(N-boxを「print-area」divで囲んだ)

出来た!凄っ!

印刷ボタン10の結果

N-box1だけが印刷されてる

複数ある場合に、印刷対象をボタンごとに自動で切り替えられたら、実戦投入できるレベルだわ感謝!

複数エリアを個別に印刷

上の手法の応用かな

コチラ。さんこうにしたのはコチラのよう。

コチラも同じ仕組みのようだ。

印刷範囲をdiv「print-area」で囲っておく。何箇所にあっても良い。

各「print-area」内に印刷ボタンを設置(CSSの@media printでボタンは印刷時にはdisplay:none;にする)

ボタンに一番近い親要素の「print-area」を取得して、コピーを作成して…という流れ

CSSはこう
.print-off {
display: none;
}
@media print {
.print-btn {display: none;}
}

jqueryはこう
$(function(){
$(‘.print-btn’).on(‘click’, function(){
var printPage = $(this).closest(‘.print-area’).html();//ボタンに一番近い親要素のprint-areaを取得

$(‘body’).append(‘<div id=”print”></div>’);//プリント用の要素「#print」を作成

$(‘#print’).append(printPage);//クローンせずに入れてるな…

$(‘body > :not(#print)’).addClass(‘print-off’);//「#print」以外の要素に非表示用のclass「print-off」を付与

window.print();

$(‘#print’).remove();
$(‘.print-off’).removeClass(‘print-off’);//作成した「#print」と、非表示用のclass「print-off」を削除

});
});

試しにつくってみる。

ボタンの位置をどうするか。
boxの外、コンテナ(box-ctr2)の中に入れる版とN-box1の中に入れる版(position-absoluteで配置)を作ってみた

倍数の意味

「AがBの倍数」
→➀AはBの2倍・3倍…
→➁AはBで割り切れる

約数の意味

「AがBの約数」
→➀B=A×C(CもBの約数)
→➁BはAで割り切れる

複数の範囲を個別に印刷

ココだけど、「each」と「eq」が分からん

eachはループ処理をする。ココココに解説がある。

eqは指定したポジションのエレメントを取り出す。ココココココに解説がある。

複数エリアを個別に印刷

コチラにもあり。

処理内容がよく分からないが上のバージョンとは違う処理だ

 

 

 

プラグイン「jPrintArea.js」

古いプラグインのようだ(1年以内の日本語のページが無い)が便利そう

コチラコチラコチラコチラで紹介

 

タイトルとURLをコピーしました