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>

I think the 'page URL' is printed according to user-preferences set in the browser (in order that people can easily find that page again), and as such is unlikely to be affected by anything you implement with JavaScript or CSS. — David Thomas, Oct 30 '12 at 10:26

score 9 · Accepted Answer · edited May 23 '17 at 11:46

9

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).

edited May 23 '17 at 11:46

Community

1
1

answered Oct 30 '12 at 10:37

Pierre Henry

16,658
22
85
105

This is right answer.You can change the setting from print dialog. Under the header and footer setting you can change the print setting. – Azmat Karim Khan Apr 03 '16 at 17:07

score 5 · Answer 2 · edited Apr 13 '17 at 12:46

5

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

edited Apr 13 '17 at 12:46

Community

1
1

answered Feb 19 '15 at 10:10

Dhara Joshi

407
5
9

score 1 · Answer 3 · answered Oct 30 '12 at 10:23

1

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

answered Oct 30 '12 at 10:23

mtmacdonald

14,216
19
63
99

score 1 · Answer 4 · answered Jan 09 '19 at 15:50

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 */
}

remove url and print text from the printed page

4 Answers4

Linked

Related