Необходимо удалить значения href при печати в Chrome


290

Я пытаюсь настроить CSS для печати и обнаружил, что он печатает ссылки со hrefзначением, а также со ссылкой.

Это в Хроме.

Для этого HTML:

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

Это печатает:

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

И я хочу это напечатать:

Google

1
Имейте в виду, ПОЧЕМУ каждая основная платформа CSS делает это - вы не можете нажать на бумагу! Поэтому, если вы собираетесь деактивировать его, вы должны добавить внизу список ссылок, например, такой: alistapart.com/article/improvingprint
Julix,

1
Это правда, но я думаю, что лучше контролировать, когда и где появляется ссылка. Например, в моих ссылках я хочу, чтобы они появлялись в следующей строке после текста, без скобок. Так что я просто показываю URL в тексте.
user4052054

Ответы:


602

Bootstrap делает то же самое (... как выбранный ответ ниже).

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

Просто удалите его оттуда или переопределите в собственной таблице стилей печати:

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

17
<style>@media print{a[href]:after{content:none}}</style>В основном для себя, когда я снова и снова возвращаюсь на эту страницу, спасибо
Уильям Энтрикен,

1
Очевидно, Фонд тоже делает то же самое.
spasticninja

Похоже, HTML5 Boilerplate также делает это! Так что я думаю, что мне нужно переопределить это с помощью изменения кода на моем собственном веб-сайте и с помощью инспектора на других веб-сайтах ...
ADTC

Предупреждение: у нас были проблемы, когда таблица иногда теряла последние несколько строк при печати. Оказалось, что это правило было виновником, или, по крайней мере, удаление его решило проблему. Не знаю, почему это так.
Хенрик Н

1
@HenrikN - я думаю, что это связано с плавающими колонками начальной загрузки. использование float:noneтам, где это необходимо, исправило аналогичную проблему несколько недель назад; может помочь вам, но это другая проблема
Эндрю

40

Это не так . Где-то в вашей таблице стилей печати вы должны иметь этот раздел кода:

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

Единственная другая возможность - у вас есть расширение, делающее это за вас.


1
Я получил это в curb Foundation css.
forX


10

Если вы используете следующий 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" />

просто измените его на следующий стиль, добавив 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" />

Я думаю, что это будет работать.

прежние ответы как

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

были не очень хорошо работают в браузере Chrome.


4

Я столкнулся с подобной проблемой только с вложенным img в моем якоре:

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

Когда я подал заявку

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

По какой-то причине я потерял img и всю ширину якоря, поэтому вместо этого я использовал:

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

который работал отлично.

Бонусный совет : просмотр предварительного просмотра


1

Чтобы скрыть URL страницы.

media="print"Пример использования в стиле tage:

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

Если вы хотите удалить ссылки:

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

-2

Для обычных пользователей. Откройте окно проверки текущей страницы. И введите:

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

Тогда вы не увидите ссылки в предварительном просмотре.


Это хорошее решение, если у вас нет контроля над исходным кодом страницы, которую вы пытаетесь распечатать.
Paddymac
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.