Musisz usunąć wartości href podczas drukowania w Chrome

Próbuję dostosować drukowany CSS i stwierdzam, że drukuje on linki wraz z hrefwartością, a także link.

To jest w Chrome.

W przypadku tego HTML:

<a href="http://www.google.com">Google</a>

Drukuje:

Google (http://www.google.com)

I chcę to wydrukować:

Google

Bootstrap robi to samo (... jak wybrana poniżej odpowiedź).

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

Po prostu usuń go stamtąd lub zastąp w swoim własnym arkuszu stylów drukowania:

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

Tak nie jest . Gdzieś w arkuszu stylów drukowania musisz mieć tę sekcję kodu:

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

Jedyną inną możliwością jest to, że masz rozszerzenie, które robi to za Ciebie.

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

Praca jest idealna.

Jeśli korzystasz z następującego 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" />

wystarczy zmienić go na następujący styl, dodając 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" />

Myślę, że to zadziała.

poprzednie odpowiedzi jak

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

nie działały dobrze w przeglądarce Chrome.

Podobny problem napotkałem tylko z zagnieżdżonym obrazem img w mojej kotwicy:

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

Kiedy złożyłem podanie

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

Z jakiegoś powodu zgubiłem obraz i całą szerokość kotwicy, więc zamiast tego użyłem:

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

co działało idealnie.

Dodatkowa wskazówka : sprawdź podgląd wydruku

Aby ukryć adres strony.

użyj media="print"przykładowego stylu:

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

Jeśli chcesz usunąć linki:

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

Dla zwykłych użytkowników. Otwórz okno inspekcji bieżącej strony. I wpisz:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

Wtedy nie zobaczysz linków URL w podglądzie wydruku.