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

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

Rozwiń fragment kodu

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,