見出し画像

[JavaScript/CSS] 印刷ボタンを押した時だけCSS適用

今回は、画面上の印刷ボタンを押した時だけ、
一時的に「print.css」を適用するソースは以下の通り。

<input type="button" value="印刷" onclick="execPrint()" />
function execPrint() {
	var link = document.createElement('link');
	link.href = 'css/print.css';
	link.rel = 'stylesheet';
	link.type = 'text/css';
	document.body.appendChild(link);  // css読み込み

	link.addEventListener('load', () => {
		window.print();  // 印刷実行
	});

	window.setTimeout(function() {
		document.body.removeChild(link);  // 1秒後にcss解除
	}, 1000);
}

ブラウザの通常印刷時は、崩れたデザインで、
印刷ボタンを押した時は、綺麗なレイアウトで印刷できる!

ってこれって需要あるのかな…

この記事が気に入ったらサポートをしてみませんか?