[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);
}
ブラウザの通常印刷時は、崩れたデザインで、
印刷ボタンを押した時は、綺麗なレイアウトで印刷できる!
ってこれって需要あるのかな…
この記事が気に入ったらサポートをしてみませんか?