132

I want to remove the URL that gets printed on the bottom of the page.

like:

yomari.com/.../main.php?sen_n

How can it be omitted or prevent from getting printed?

To be more specific, is there any way I can prevent the page URL, date and the page title being printed along, while printing the web page?

3
  • 4
    Can that be done programatically? Its really a browser page setup!
    – Shoban
    Feb 25, 2009 at 9:12
  • Totally a 'browser page setup' thing. But I found this tutorial a bit helpful for print page CSS. Dec 30, 2012 at 10:22
  • Tried these ? @page { margin: 0; size: A4; } html { background: #fff !important; margin: 0; } body { margin: 2cm; }
    – djibe
    Dec 8, 2022 at 18:39

23 Answers 23

158

Following code sample will work for you,

<style type="text/css" media="print">
@page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
}
</style>

see the answer on Disabling browser print options (headers, footers, margins) from page?

and specification of the @page

7
52

i found something in the browser side itself.

Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.

Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.

Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.

Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.

0
24

This helped me: Print page without links

@media print {
    a[href]:after {
        content: none !important;
    }
}
3
  • can you please explain this Jun 30, 2019 at 22:34
  • 1
    I had a problem with bootstrap hyperlinks showing its href content on print page. This solution helped me fix the problem.
    – Mohsin
    Jul 21, 2020 at 15:37
  • for some reason i can't determine, this doesn't work for me.
    – Ezz Redfox
    May 25, 2022 at 9:15
20

If you set the margin for a page using the code below the header and footers are omitted from the printed page. I have tested this in FireFox and Chrome.

<style media="print">
 @page {
  size: auto;
  margin: 0;
       }
</style>
1
18

Having the URL show is a browser client preference, not accessible to scripts running within the page (let's face it, a page can't silently print themselves, either).

To avoid "leaking" information via the query string, you could submit via POST

4
  • 1
    noooo ... POST is not an encryption mechanism - it's a hint about the possible side effects of the request.
    – troelskn
    Feb 25, 2009 at 9:36
  • Instead of printhing a long multi line query string. I woul be happy to print just the url
    – Shoban
    Feb 25, 2009 at 9:42
  • the query string is part of the url. if the url is too long, you should fix that instead.
    – troelskn
    Feb 25, 2009 at 11:17
  • 5
    I didn't say it was an encryption thing -- it does remove the query parameters from the URL, which was a requested mitigation factor Feb 25, 2009 at 12:25
15

Browser issue but can be solved by these:

<style type="text/css" media="print">
      @media print
      {
         @page {
           margin-top: 0;
           margin-bottom: 0;
         }
         body  {
           padding-top: 72px;
           padding-bottom: 72px ;
         }
      } 
</style>
1
  • 1
    Upvoted because you include CSS that puts margins back in place. Thx! Jul 31, 2020 at 14:39
8

I am telling you about Mozilla Firefox ( I hope it should be same way in other browsers also).

Click on Firefox menu , Go to Print , Select Page Set Up from sub menu of Print. A pop will come up on your screen, there go to "Margin & Header /Footer" tab.

In that select "BLANK" for header / footer as per requirement before printing. You can check the preview for confirmation.

I hope this will help.

5

Nowadays, you can use history API to modify the URL before print, then change back:

var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);

But you need to make a custom PRINT button for user to click.

3
  • 1
    Using your solution I still see the "domain-name.com" printed in the top right corner. It removed everything after that. Jul 31, 2020 at 14:32
  • This does not work inside SPAs, because the client side router changes the view before it can be printed.
    – Junaga
    Dec 19, 2021 at 0:10
  • I tried all the solutions above within Asp.Net MVC 5 and none of them worked. While this one still leaves the main domain name, that is much more preferable than all the other parameters after so thanks! Jun 3 at 15:08
3

You can remove the url dispalying on the printed document via your browser settings.You just click file->page setup->header and footer set all things as blank.if you hav ie,you just remove &U from footer textbox.hopefully this will help you

3
@media print { a[href]:after { content: none !important; } }
3

This is working fine for me using jquery

<style>
  @media print { @page { margin: 0; } 
   body { margin: 1.6cm; } }
</style>
2

I do not know if you are talking about a footer within your actual graphic or the url the print process within the browser is doing.

If its the url the print process is doing its really up to the browser if he has a feature to turn that off.

If its the footer information i would recommend using a print stylesheet and within that stylesheet to do

display: none;

For the particular ID or class of the footer.

To do a print stylesheet, you need to add this to the head.

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

In Google Chrome, this can be done by setting the margins to 0, or if it prints funky, then adjusting it just enough to push the unwanted text to the non-printable areas of the page. I tried it and it works :D

enter image description here

1

On Chrome 57 the following worked for me, if you have control of the HTML page that needs to be printed (in my case I needed to print a small 3x1 inch label):

  • remove the HTML title element from header (either temporarily using jquery or permanently if that page does not really need a title)
  • set the @page margin to 0 as mentioned by @Chamika Sandamal

This resulted in printing a page that only contained the body text, no URLs, no page #s etc.

1

Chrome headless now supports an extra options --print-to-pdf-no-header which removes header and footer from the printed PDF file

3
  • How can I use it?
    – unbreak
    Jan 19 at 8:31
  • if you have chrome installed /path/to/google-chrome --headless --disable-gpu --print-to-pdf-no-header --print-to-pdf=/path/to/file.pdf $url
    – Sante
    Jan 25 at 20:13
  • 1
    Thank you. I was specifically looking for this. I'm using chrome to generate large PDFs from a template and because it's being done inside a private server, it's leaking paths which I do not want Mar 19 at 16:09
0

I would agree with most of the answers saying that its a browser settings but still you can achieve what you want via COM. Keep in mind that most browsers will still have issue with that and even IE will raise the COM security bar to users. So unless its not something you are offering within organisation, don't do it.

0

I have the same problem. I wonder if it is possible to create the HTML for printing via a jquery plugin: http://www.recoding.it/?p=138

Then send the HTML to a php script (using an ajax call), generate a pdf with http://www.xhtml2pdf.com/ or http://code.google.com/p/wkhtmltopdf/.

Afterwards the pdf could be displayed (by setting the appropriate content type and direct rendering) or displayed by a http-Redirect to the generated pdf.

The generated pdfs in the pfd_for_printing-folder could act as cache and be deleted by a job once a day.

1
0
<style type="text/css" media="print">
  @page {
    size: auto;  
    margin: 0;  
  }
</style>
//now set manual padding to body
<style>
  body{
    padding-left: 1.3cm;
    padding-right: 1.3cm; 
    padding-top: 1.1cm;
  }
</style>
2
  • this code remove only margin .that's why url not display .but when you use this you loss the page number. Oct 19, 2018 at 10:51
  • i want to only remove page url on print not page number Oct 19, 2018 at 10:51
0

The URL is used when the page has no title, so by setting a title via <tittle>My Site</title> you can avoid the current URL being used.

If printing is invoked by your site programmatically you can also change the document.title before and after printing. By using a invisible or zero space character you can hide it. For copying i put it between those 2 brackets: (​)

-1

Perhaps you could try chrome (Probably Safari also)

The url & the page number in the header & footer is not visible when I print to pdf on OSX with Google Chrome.

Sorry not sure if this applies to windows

-2

I have a trick to remove it from the print page in Firefox. Use this:

<html moznomarginboxes mozdisallowselectionprint>

In the html tag you have to use moznomarginboxes mozdisallowselectionprint. I am sure it will help you a lot.

-2

This will be the simplest solution. I tried most of the solutions in the internet but only this helped me.

@print {
    @page :footer {
        display: none
    }

    @page :header {
        display: none
    }
}
1
  • 1
    In what browser does this work? In Chrome 80 it doesn't work.
    – Ruben S
    Mar 14, 2020 at 7:49
-3
@media print {
    #Header, #Footer { display: none !important; }
}

Check this link

3
  • 1
    Hello welcome to SO, thank you for trying to answer this question. Can you provide more explanation behind your answer and the logic behind your fix? Cheers!
    – James Wong
    Jun 13, 2018 at 4:31
  • 1
    Hi, Thanks, this works perfectly in chrome (at least), I don't know why people down voted this perfect solution.
    – Saman
    Aug 15, 2020 at 10:46
  • @Saman Because this solution doesn't work except in extremely specific circumstances. Namely, if your header is called #Header and your footer is called #Footer. This probably works OK in some wordpress templates, but it won't work well anywhere else. Besides which, it doesn't answer OP's question, which was about hiding the URL created by the browser, not the header/footer. I'm surprised it doesn't have more downvotes, frankly. Nov 11, 2020 at 9:44