JavaScriptで指定した要素だけを印刷する
例えば、指定したidを持つHTML要素だけを印刷したいときの方法
Usage
- 印刷しない要素に
display:none;を付与する - 印刷するための場所に印刷対象を移動
- 印刷前の状態に戻す
非表示にするだけだと表示が崩れる場合があるので
HTML要素自体を操作するアプローチをとった
<body>
<div id="print-area"></div>
<div id="container">
<p>Test image</p>
<div id="print-content">
<img src="imac.png" alt="pc" width="100" height="100">
</div>
<div id="print-position"></div>
<p id="sample-txt">Sample text</p>
<input type="button" id="btn" value="print">
</div>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function () {
const container = document.getElementById('container');
const content = document.getElementById('print-content');
const sampleTxt = document.getElementById('sample-txt');
const printArea = document.getElementById('print-area');
const printPosition = document.getElementById('print-position');
container.style.display = 'none';
printArea.appendChild(content);
window.print();
container.insertBefore(content, printPosition);
container.style.display = 'block';
});
</script>
</body>
z-indexを操作して白い背景と表示したい要素だけを前面に出しても面白いかもしれないWEBページの作りによっては、HTML要素をループして、印刷したい要素以外を非表示にすればOKの場合もある
ちなみにinsertBeforeで間違った指定の仕方をすると、下記のようなエラーが出る
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
idが重複しているHTML要素に対して
insertBeforeをしようとして、意図した要素を取得できずハマったことがある