Home » Html » Print a website without printing the link locations?

Print a website without printing the link locations?

Posted by: admin November 29, 2017 Leave a comment

Questions:

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.

Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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!

Questions:
Answers:

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

Questions:
Answers:

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: "";
}

Questions:
Answers:

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

Questions:
Answers:

For anyone using Bootstrap 3, the selector used is:

a[href]:after { }

And can be overriden with something like:

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

Questions:
Answers:

Use additional CSS for print.

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

Questions:
Answers:

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

Questions:
Answers:

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?

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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