PHP Print only open windows not whole screen

Question

I have a print button with the below code:

<script type="text/javascript"> \\this hides the print & close buttons while printing
function printpage() {
    //Get the print button and put it into a variable
    var printButton = document.getElementById("print");
    var closeButton = document.getElementById("close");
    //Set the print button visibility to 'hidden' 
    printButton.style.visibility = 'hidden';
    closeButton.style.visibility = 'hidden';
    //Print the page content
    window.print()
    //Set the print button to 'visible' again 
    //[Delete this line if you want it to stay hidden after printing]
    printButton.style.visibility = 'visible';
    closeButton.style.visibility = 'visible';
}
</script>
      <button type="button" id="print" class="btn btn-danger" onclick="printpage()">Print</button>

      <button type="button" id="close" class="btn btn-danger" data-dismiss="modal">Close</button>

now it works and opens the print page and hides the buttons but its trying to print the whole page but i only need it to print the content in the div section "myModal"

I tried this and it did what i wanted but after printing the X in the active window doesn't work to close it nor do the buttons.I have to refresh the page with F5 to get back to the main window:

function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}

When you rewrite the inner HTML of the document, you destroy all the javascript bindings, including the Bootstrap modals and buttons. They don't rebind automatically when you restore the HTML. You need to rebind them manually in order to the page to work properly again, or you can try using a new browser window. See here: https://stackoverflow.com/questions/33732739/print-a-div-content-using-jquery — José A. Zapata, Apr 03 '18 at 03:20
@JoséA.Zapata i have fixed the issue with kyingr suggestion below but thank you i have saved that page :) — Str1fe, Apr 03 '18 at 03:21

score 0 · Answer 1 · answered Apr 03 '18 at 03:14

0

Instead of using JavaScript, use a CSS media query:

@media print {
   #print, #close {
      display:none;
   }
}

With regard to just printing #myModal, we would need to see the rest of the markup to figure out how.

answered Apr 03 '18 at 03:14

Charlie

8,530
2
55
53

im not that good with CSS yet sir could you guide me through this? Where would i use that code you gave me? – Str1fe Apr 03 '18 at 03:15

score 0 · Answer 2 · answered Apr 03 '18 at 03:15

There is a similar question Here.

Be sure myModal is an id on your html element. Put the following code to your any of the .css files.

@media print {
  body * {
    visibility: hidden;
  }
  #myModal, #myModal * {
    visibility: visible;
  }
  #myModal {
    position: absolute;
    left: 0;
    top: 0;
  }
}

PHP Print only open windows not whole screen

2 Answers2