remove url and print text from the printed page

Question

I have developed a web application and in my web page there are some data displays with common headers, footers , menus and other images. so I have added a small button as print preview so that user only can see data. After user click on print preview button only data display as a popup and in that popup I added a button call print so that user can click on it and take a print out of that page.

this print button directly call to window.print() in onClick event and it working fine I can get the print outs.

but my problem is in my printed page on top of that I can find the "Print" text which is button caption and in above that I can find the url which is something http://localhost/..............

So is there a way that I can remove those print text and url from my printed page.

Many Thanks

this is what the print preview button do .

function printPreView(reportCategory,reportType,transactionType,searchOption,customerRokaID,utilityCompany,fromDate,toDate,telcoName,bank){

var request = "selectedMenu="+reportCategory+"&loginStatus=success&criteria="+searchOption+"&customer="+customerRokaID+"&from="+fromDate+"&to="+toDate+"&nspTypes="+utilityCompany+"&trxTypes="+transactionType+"&options="+reportType+"&telcoTypes="+telcoName+"&bankTypes="+bank+"&printable=yes";


window.open ("report/showReport.action?"+request,null,"location=no,menubar=0,resizable=1,scrollbars=1,width=600,height=700");
}

Here is how I have put my Print button

 <form>

   <input type="button" value="Print" onClick="window.print() ">

 </form>

Solution 1

The header with the URL (and sometimes the page title, page number etc.) is automatically added by the web browser. Basically the settings can only be changed by the user. This topic is discussed in details in that question

For the button itself, you could hide it using specific print CSS as discussed in that question. And as MMacdonald said, you can use this technique for other elements as well so that you don't need to re-render your page. But then you would lose the preview feature (the user could still use the browser's print preview feature).

Solution 2

If you're using bootstrap, find following code:

 @media print {
  ...
  a[href]:after {
    content: " (" attr(href) ")";
  }
  ...
}

Overriding the style with content:none handles the situation fine.

Reference: this url

Solution 3

This worked for me with about 1cm margin

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

Solution 4

Consider using media-dependent style sheets instead of making a bespoke "print page" solution.

View more solutions