How to hide input tag when using window.print()-CodePudding

When using window.print(), I want to hide the 'print page' button, input tags and only print the 's-wrapper' area. However, during print preview, input tag without css applied is printed on the preview screen. How to remove input tag?

If I print without specifying a specific area, the 's-box' does not fill the A4 paper and is not printed in the center, and the box is printed on top.

[html]

<button onclick="printthispage()" >print page</button>
<div  id="print">
    <div >
        {% for p in page %}
            {% if p== 'S' and p.slide_number == 1 %} <img src="{{ p.slide.url }}" > {% endif %}
        {% endfor %}
        <input  value="{{ image.s }}">
        <input  value="{{ image.o }}">
        <input  value="{{ image.e }}">
        <input  value="{{ image.t }}">
        <button >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 }}%;}

CodePudding user response：

You can use onbeforeprint (as you have started on) to change the content (hide/remove/rearrange) before print dialog appears. See: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Then you use onafterprint after to revert the changes.

One way to do it is like this:

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";
  }); 
};