CODEWITHSUNDEEP
javascripthtmlcssprinting
Adirael
Adirael

Reputation: 9448

Print a website without printing the link locations?

I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:

    Homepage (http://localhost)

To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!

EDIT: This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.

Upvotes: 38

Views: 64712

Answers (13)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13908

While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.

Remove Footer Links in Chrome Print View

That's it.

Upvotes: 1

Pradip Daunde
Pradip Daunde

Reputation: 421

Every browser having setting of printing header and footer ,and background graphics If you disable this setting of printing header and footer then it will not show on your print page

Upvotes: -1

Mike Chelen
Mike Chelen

Reputation: 402

For anyone using Bootstrap 3, the selector used is:

a[href]:after { }

And can be overriden with something like:

a[href]:after {
   content: initial;
}

Upvotes: 4

krachleur
krachleur

Reputation: 366

I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...." hopefully it will help

Upvotes: 0

tgursk
tgursk

Reputation: 81

Currently using the content property should work in all major browsers.

    @media print  - or -  <style type="text/css" media="print">

    a:link:after, a:visited:after {  
        content: normal; //TODO: add !important if it is overridden  
    }

More options here: CSS Content.

More usefull ways of using the content attribute here: CSS Tricks

Upvotes: 8

Clinton Green
Clinton Green

Reputation: 9977

I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.

$('a[title="Show Profile"]').contents().unwrap();

More info here Remove hyperlink but keep text?

Upvotes: 0

Jeroen K
Jeroen K

Reputation: 10438

I found the other solutions don't work (anymore) cross-browser. The following works in FF 29, Chrome 35, IE 11:

a:link:after, a:visited:after {  
  content: normal !important;  
}

Upvotes: 5

Dajo
Dajo

Reputation: 140

content: ""; does not work I use this:

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";    
    }
}

This works to disable!

Upvotes: 14

Rudias
Rudias

Reputation: 355

Adding this will help you to remove those unwanted links

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

Reading this will help

Upvotes: 1

coloradoblue
coloradoblue

Reputation: 625

My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.

body a:link:after, body a:visited:after {    
  content: "";
}

Upvotes: 5

mliebelt
mliebelt

Reputation: 15525

So to avoid additional print-out of link information in a printed web page, add the following rules to the @media print section:

a:link:after, a:visited:after {
    content: "";
}

This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.

Upvotes: 48

Mchl
Mchl

Reputation: 62369

Use additional CSS for print.

See here: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

Upvotes: 1

mplungjan
mplungjan

Reputation: 177691

Seems you are printing a page with this styling from a CSS2 compliant browser

http://www.alistapart.com/articles/goingtoprint/

In a fully CSS2-conformant browser, we can parenthetically insert the URLs of the links after each one, thus making them fairly useful to anyone who has a copy of the printout and a web browser handy. Here’s the rule, which restricts this effect to the “content” div and thus avoids sticking a URL in the masthead:

#content a:link:after, #content a:visited:after {    
  content: " ("attr(href) ") ";    
  font-size: 90%;   
}

Try it out in a Gecko-based browser, like Mozilla or Netscape 6.x. After every link in the printout, you should see the URL of the link in parentheses.

Upvotes: 24

Related Questions