How to remove the URL from the printing page?

O

23

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?

Ocam answered 25/2, 2009 at 9:9 Comment(3)

Can that be done programatically? Its really a browser page setup! – Concord 25/2, 2009 at 9:12

Totally a 'browser page setup' thing. But I found this tutorial a bit helpful for print page CSS. – Fuzz 30/12, 2012 at 10:22

Tried these ? @page { margin: 0; size: A4; } html { background: #fff !important; margin: 0; } body { margin: 2cm; } – Photozincography 8/12, 2022 at 18:39

C

159

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

Caelum answered 20/2, 2013 at 9:5 Comment(7)

On Firefox 20.0 this doesn't remove URL from Print Preview – Revolutionize 26/5, 2013 at 7:5

Firefox solution: #2193306 – Compressibility 22/10, 2015 at 16:38

Great answer. Even better just set the bottom margin, e.g. margin-bottom: 0mm; – Sclerite 6/1, 2016 at 11:42

This actually worked on my Firefox 50 @MirzhanIrkegulov – Marijo 3/12, 2016 at 23:44

The topic starter asked how to remove top and bottom colontitles (url page number title) a browser adds during the print preview. – Slumber 9/10, 2017 at 13:39

This doesn't work in all browsers: caniuse.com/css-paged-media – Caterwaul 14/2, 2022 at 15:29

How I can only remove the url but not the page number from the footer? – Endolymph 2/3, 2022 at 10:45

M

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

Masonry answered 13/4, 2016 at 12:40 Comment(0)

D

24

This helped me: Print page without links

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

Dafna answered 18/12, 2017 at 9:41 Comment(3)

can you please explain this – Beene 30/6, 2019 at 22:34

I had a problem with bootstrap hyperlinks showing its href content on print page. This solution helped me fix the problem. – Didier 21/7, 2020 at 15:37

for some reason i can't determine, this doesn't work for me. – Repentant 25/5, 2022 at 9:15

P

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>

Pasticcio answered 16/10, 2016 at 6:10 Comment(1)

Note that this removes the margin between pages in Firefox. Example: i.imgur.com/krDlC1K.png – Titillate 31/5, 2018 at 14:59

G

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

Greenhouse answered 25/2, 2009 at 9:18 Comment(4)

noooo ... POST is not an encryption mechanism - it's a hint about the possible side effects of the request. – Aquavit 25/2, 2009 at 9:36

Instead of printhing a long multi line query string. I woul be happy to print just the url – Concord 25/2, 2009 at 9:42

the query string is part of the url. if the url is too long, you should fix that instead. – Aquavit 25/2, 2009 at 11:17

I didn't say it was an encryption thing -- it does remove the query parameters from the URL, which was a requested mitigation factor – Greenhouse 25/2, 2009 at 12:25

H

16

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>

Harlen answered 25/1, 2018 at 9:38 Comment(1)

Upvoted because you include CSS that puts margins back in place. Thx! – Embed 31/7, 2020 at 14:39

R

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.

Rolypoly answered 19/11, 2013 at 9:26 Comment(0)

C

5

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.

Cochabamba answered 15/12, 2017 at 6:2 Comment(3)

Using your solution I still see the "domain-name.com" printed in the top right corner. It removed everything after that. – Embed 31/7, 2020 at 14:32

This does not work inside SPAs, because the client side router changes the view before it can be printed. – Deepen 19/12, 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! – Downright 3/6, 2023 at 15:8

J

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

Jay answered 18/1, 2012 at 6:28 Comment(0)

G

3

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

Genevagenevan answered 8/10, 2018 at 13:13 Comment(1)

Can you more explain your answer ? Also, for me it doesn't change anything – Tomika 25/3 at 14:46

C

3

This is working fine for me using jquery

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

Cultivate answered 14/4, 2020 at 2:56 Comment(0)

Y

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" />

Yuen answered 25/2, 2009 at 9:18 Comment(0)

R

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

Realist answered 14/1, 2015 at 7:53 Comment(0)

L

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.

Libeler answered 3/5, 2017 at 1:19 Comment(0)

F

1

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

Famed answered 30/12, 2020 at 16:48 Comment(3)

How can I use it? – Darken 19/1, 2023 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 – Famed 25/1, 2023 at 20:13

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 – Aquarist 19/3, 2023 at 16:9

B

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.

Bumboat answered 25/2, 2009 at 11:13 Comment(0)

C

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.

Colier answered 25/11, 2010 at 22:48 Comment(1)

I want to print part of the page (with styles) to PDF... How can I achieve that? #25082895 – Haland 1/8, 2014 at 16:37

W

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>

Wardlaw answered 14/7, 2018 at 12:42 Comment(2)

this code remove only margin .that's why url not display .but when you use this you loss the page number. – Trimolecular 19/10, 2018 at 10:51

i want to only remove page url on print not page number – Trimolecular 19/10, 2018 at 10:51

A

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: ()

Altdorfer answered 30/5, 2023 at 8:59 Comment(0)

P

-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

Pseudo answered 23/7, 2011 at 5:7 Comment(0)

J

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

Joule answered 23/1, 2015 at 13:52 Comment(0)

K

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

Klee answered 8/3, 2019 at 18:6 Comment(1)

In what browser does this work? In Chrome 80 it doesn't work. – Nates 14/3, 2020 at 7:49

G

-3

@media print {
    #Header, #Footer { display: none !important; }
}

Check this link

Gravel answered 13/6, 2018 at 4:20 Comment(3)

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! – Olfe 13/6, 2018 at 4:31

Hi, Thanks, this works perfectly in chrome (at least), I don't know why people down voted this perfect solution. – Greenlet 15/8, 2020 at 10:46

@Greenlet 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. – Chantal 11/11, 2020 at 9:44

Recommended topics

Hot tags