使用window.print()時如何隱藏輸入標簽

使用 window.print() 時，我想隱藏“列印頁面”按鈕、輸入標簽并只列印“s-wrapper”區域。但是，在列印預覽期間，未應用 css 的輸入標簽會列印在預覽螢屏上。如何洗掉輸入標簽？

如果我在沒有指定特定區域的情況下列印，則“s-box”不會填滿 A4 紙，也不會列印在中心，而盒子會列印在頂部。

[html]

<button onclick="printthispage()" class="no-print">print page</button>
<div class="s-wrapper" id="print">
    <div class="s-box">
        {% for p in page %}
            {% if p== 'S' and p.slide_number == 1 %} <img src="{{ p.slide.url }}" class="s-page"> {% endif %}
        {% endfor %}
        <input class="no-print S_{{ image.id }}_top1" value="{{ image.s }}">
        <input class="no-print S_{{ image.id }}_top2" value="{{ image.o }}">
        <input class="no-print S_{{ image.id }}_top3" value="{{ image.e }}">
        <input class="no-print S_{{ image.id }}_top4" value="{{ image.t }}">
        <button class="no-print S_{{ image.id }}_det">Detail</button>
    </div>
</div>

<script type="text/javascript">
function printthispage() {
    window.print();
}
function beforePrint() {
    initBodyHtml = document.body.innerHTML;
    document.body.innerHTML = document.getElementById('print').innerHTML;
}
function afterPrint() {
    document.body.innerHTML = initBodyHtml;
}


window.onbeforeprint = beforePrint;
</script>

[CSS]

@page {
    size: A4 landscape;
    margin:0;
}
@media print{
   .no-print {
       visibility: hidden;
   }
}

.s-page{
    width: 100%;}

.s-wrapper{
    width: 78%;
    margin: 20px auto;}

.s-box{
    position: relative;
    border: 1px solid black;}


input[class$="S_{{ image.id }}_top1"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left }}%;
    right: {{ link.link_right }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top2"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:4 }}%;
    right: {{ link.link_right|add:-4 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top3"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:8 }}%;
    right: {{ link.link_right|add:-8 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top4"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:12 }}%;
    right: {{ link.link_right|add:-12 }}%;
    bottom: {{ link.link_bottom }}%;}

input[class$="S_{{ image.id }}_top5"] {
    position: absolute;
    width: 4%;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:16 }}%;
    right: {{ link.link_right|add:-16 }}%;
    bottom: {{ link.link_bottom }}%;}

button[class$="S_{{ image.id }}_det"] {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 10%;
    padding: 0.5%;

    position: absolute;
    top: {{ link.link_top }}%;
    left: {{ link.link_left|add:20 }}%;
    right: {{ link.link_right|add:-20 }}%;
    bottom: {{ link.link_bottom }}%;}

uj5u.com熱心網友回復：

在列印對話框出現之前，您可以使用onbeforeprint（如您開始）更改內容（隱藏/洗掉/重新排列）。請參閱：https ://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

然后使用onafterprintafter 還原更改。

一種方法是這樣的：

function printthispage() {
    window.print();
}

window.onbeforeprint = () => {
  document.querySelectorAll(".no-print").forEach(el => {
    el.style.display = "none";
  });
};

window.onafterprint = () => {
  document.querySelectorAll(".no-print").forEach(el => {
    el.style.display = "inline-block";
  }); 
};

標籤：javascript html css

上一篇：如何在Vue中隱藏Chart.js圖例？

下一篇：網格中的按鈕，間隙中有箭頭