Потрібно видалити значення href під час друку в Chrome

290

Я намагаюся налаштувати CSS для друку і виявляю, що він друкує посилання зі hrefзначенням, а також посиланням.

Це в Chrome.

Для цього HTML:

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

Він друкує:

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

І я хочу, щоб він надрукував:

Google

— Кріс Гратіні
джерело

1

Майте на увазі, Чому кожен головний фреймворк CSS робить це - ви не можете натиснути на папір! Тож якщо ви збираєтесь його відключити, слід додати список посилань у нижній частині, таких як: alistapart.com/article/improvingprint

— Julix

1

Це правда, але я думаю, що краще контролювати, коли і де з’являється посилання. Наприклад, у своїх посиланнях я хочу, щоб вони з’явились у наступному рядку після тексту та без дужок. Тому я просто показую URL у тексті.

— користувач4052054

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 також робить це! Тож я маю на

— увазі, що

Попередження: У нас виникли проблеми, коли таблиця іноді втрачала останні кілька рядків під час друку. Виявилося, що це правило було винуватцем або, принаймні, усунення його вирішило проблему. Не знаю, чому це мало такий ефект.

— Генрік Н

1

@HenrikN - я думаю, що це пов'язано з плаваючими стовпцями завантажувальної машини. використовуючи float:noneтам, де потрібно, вирішили подібну проблему для мене кілька тижнів тому; може допомогти вам, але це вже інше питання

— Андрій

40

Це не так . Десь у таблиці стилів друку ви повинні мати цей розділ коду:

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

Єдина інша можливість - у вас є розширення, яке робить це за вас.

— Ерік
джерело

1

Я отримав це в cur Foundation css.

— forX

26

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

Розгорніть фрагмент

Робота ідеальна.

— JELEWA.de
джерело

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

не працювали добре в хромованому перегляді.

— Ван Джіджун
джерело

4

З подібною проблемою я зіткнувся лише з вкладеним імгіком у своєму якірі:

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

який працював ідеально.

Порада про бонус : переглянути попередній перегляд друку

— TrampGuy
джерело

1

Щоб приховати URL-адресу сторінки.

використання media="print"в прикладі тегів стилів:

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

Тоді ви не побачите посилання URL-адреси в попередньому перегляді друку.

— Вень Сінь
джерело

Це хороше рішення, якщо у вас немає контролю над вихідним кодом сторінки, яку ви намагаєтеся надрукувати.

— Paddymac