Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need to remove href values when printing in Chrome

People also ask

How do I hide URL when printing?

Google Chrome: Go to the Menu icon in the top right corner of the browser and Click on Print button. Uncheck the “Headers and footers” option underneath the “Margins” option. Apple Safari: Go to the print option from the menu and the Print dialog appears. Uncheck the “Print headers and footers” option.

How do I print a PDF without URL?

Go to the File \ Page Setup item on the menu, and then select the Margins & Header/Footer tab in the dialog. You should be able to change the drop-downs to set the Title or URL to –blank– instead, which will prevent them from printing.

How do I print a URL at the bottom of Chrome?

Try this: In Page Setup, have URL on the left in the Footer and have both Center and Right as Blank. That about as good as you're gonna get of a full URL. Try this: <br /> In Page Setup, have URL on the left in the Footer and have both Center and Right as Blank.


Bootstrap does the same thing (... as the selected answer below).

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

Just remove it from there, or override it in your own print stylesheet:

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

It doesn't. Somewhere in your print stylesheet, you must have this section of code:

a[href]::after {
    content: " (" attr(href) ")"
}

The only other possibility is you have an extension doing it for you.


@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

Work's perfect.


If you use the following CSS

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

just change it into the following style by adding media="screen"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

I think it will work.

the former answers like

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

were not worked well in the chrome browse.


I encountered a similar problem only with a nested img in my anchor:

<a href="some/link">
   <img src="some/src">
</a>

When I applied

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

I lost my img and the entire anchor width for some reason, so instead I used:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

which worked perfectly.

Bonus tip: inspect print preview


To hide Page url .

use media="print" in style tage example :

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

If you want to remove links :

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}