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

290

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
Chris Gratigny
źródło
1
Pamiętaj, DLACZEGO każdy główny framework CSS to robi - nie możesz kliknąć na papierze! Więc jeśli chcesz go dezaktywować, powinieneś dodać listę linków na dole, na przykład: alistapart.com/article/improvingprint
Julix
1
To prawda, ale myślę, że lepiej mieć kontrolę nad tym, kiedy i gdzie pojawia się link. Na przykład w moich linkach chcę, aby pojawiały się w następnym wierszu po tekście i bez nawiasów. Po prostu pokazuję adres URL w tekście.
user4052054

Odpowiedzi:

602

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;
  }
}
Alex Ghiculescu
źródło
17
<style>@media print{a[href]:after{content:none}}</style>Przeważnie publikuję dla siebie, gdy wracam na tę stronę, dziękuję
William Entriken
1
Najwyraźniej Fundacja robi to samo.
spasticninja
Wygląda na to, że HTML5 Boilerplate to robi! Sądzę więc, że muszę to zmienić poprzez zmianę kodu na mojej własnej stronie oraz przez Inspektora na innych stronach ...
ADTC
Ostrzeżenie: mieliśmy problemy, w wyniku których tabela czasami traciła kilka ostatnich wierszy podczas drukowania. Okazało się, że winowajcą była ta reguła, a przynajmniej usunięcie jej rozwiązało problem. Nie wiem, dlaczego to miało taki efekt.
Henrik N
1
@HenrikN - myślę, że jest to związane z ruchomymi kolumnami bootstrap. użycie w float:nonerazie potrzeby naprawiło dla mnie podobny problem kilka tygodni temu; może ci pomóc, ale to inny problem
Andrew
40

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.

Eric
źródło
1
Mam go w Zurb Foundation CSS.
forX
26

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

Praca jest idealna.

JELEWA.de
źródło
10

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.

Wang Jijun
źródło
4

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

TrampGuy
źródło
1

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;
   }
}
Abd Abughazaleh
źródło
-2

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.

Wen Xin
źródło
To dobre rozwiązanie, jeśli nie masz kontroli nad kodem źródłowym strony, którą próbujesz wydrukować.
Paddymac,