5

Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.

I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.

for more information I have adde the image below my print preview os ubuntu

1
  • simply hide the buttons then initiate a print Commented Feb 18, 2015 at 9:52

5 Answers 5

5

add a wrapper to non-printable stuff i.e buttons in your case. check below code :

<head>
  <style type="text/css">
    #printable {
      display: none;
    }
    @media print {
      #non-printable {
        display: none;
      }
      #printable {
        display: block;
      }
    }
  </style>
</head>

<body>
  <div id="non-printable">
    Your normal page contents
  </div>

  <div id="printable">
    Printer version
  </div>
</body>

Hope it helps.

Sign up to request clarification or add additional context in comments.

Comments

4

You can specify different css rules for printing. Either you can use the @media print {} scope like this:

@media print {
    /* Add your custom css rules here */
   input {
       display: none;
   }
}

Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

1 Comment

most complete answer. and, much better than hiding things with js before printing...!
3

Use CSS @media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.

<style type="text/css">
@media print {
    #printbtn {
        display :  none;
    }
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >

Refer @media print

Additional reference

2 Comments

That's a very nice answer.
ow its nice ,new infromation +1 for that
2

1 Give your print button an ID:

<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
  1. Adjust your script the way that it hides the button before calling window.print():

    <script type="text/javascript">
        function printpage() {
            //Get the print button and put it into a variable
            var printButton = document.getElementById("printpagebutton");
            //Set the print button visibility to 'hidden' 
            printButton.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';
        }
    </script>
    

Comments

2

To simply print a document using javascript, use the following code,

print(){

        let w=window.open("www.url.com/pdf"); 
        w.print(); 
        w.close();
    }

1 Comment

How do you specify in that print() function new page break? CSS does not work at all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.