É necessário remover os valores href ao imprimir no Chrome

290

Estou tentando personalizar o CSS de impressão e descobrindo que ele imprime links com o hrefvalor e o link.

Isso está no Chrome.

Para este HTML:

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

Imprime:

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

E quero que imprima:

Google

— Chris Gratigny
fonte

1

Lembre-se: POR QUE toda grande estrutura CSS faz isso - você não pode clicar no papel! Portanto, se você for desativá-lo, adicione uma lista de links na parte inferior, como esta: alistapart.com/article/improvingprint

— Julix 23/02/17

1

Isso é verdade, mas acho melhor controlar quando e onde o link aparece. Por exemplo, nos meus links, quero que eles apareçam na próxima linha após o texto e sem parênteses. Então, eu apenas mostro o URL no texto.

— user4052054

602

O Bootstrap faz a mesma coisa (... como a resposta selecionada abaixo).

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

Apenas remova-o ou substitua-o em sua própria folha de estilo de impressão:

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

— Alex Ghiculescu
fonte

17

<style>@media print{a[href]:after{content:none}}</style>Principalmente postando para mim mesmo quando continuo voltando a esta página, obrigado

— William Entriken

1

Aparentemente, a Fundação também faz a mesma coisa.

— Spasticninja 16/10/2015

Parece que o HTML5 Boilerplate também faz isso! Então, eu acho que tem que substituí-lo por meio de alteração de código no meu próprio site, e através Inspector em outros sites ...

— ADTC

Aviso: tivemos problemas em que uma tabela às vezes perdia as últimas linhas ao imprimir. Descobriu-se que essa regra era a culpada ou, pelo menos, removê-la corrigiu o problema. Não sei por que isso teve esse efeito.

— Henrik N

1

@ HenrikN - eu acho que isso está relacionado a colunas de inicialização flutuando. usar, float:nonequando necessário, corrigiu um problema semelhante para mim algumas semanas atrás; pode ajudá-lo, mas isso é uma questão diferente

— Andrew

40

Não faz . Em algum lugar da folha de estilo de impressão, você deve ter esta seção do código:

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

A única outra possibilidade é que você tenha uma extensão fazendo isso por você.

— Eric
fonte

1

Eu o comprei no zurb foundation css.

— ForX

26

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

Expandir snippet

O trabalho é perfeito.

— JELEWA.de
fonte

10

Se você usar o seguinte 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" />

basta alterá-lo para o estilo a seguir adicionando 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" />

Eu acho que vai funcionar.

as respostas anteriores como

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

não funcionaram bem na navegação do Chrome.

— Wang Jijun
fonte

4

Encontrei um problema semelhante apenas com um img aninhado na minha âncora:

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

Quando eu apliquei

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

Perdi meu img e toda a largura da âncora por algum motivo, então usei:

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

que funcionou perfeitamente.

Dica de bônus : inspecionar a visualização da impressão

— TrampGuy
fonte

1

Para ocultar o URL da página.

use media="print"no exemplo de estilo:

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

Se você deseja remover os links:

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

— Abd Abughazaleh
fonte

-2

Para usuários normais. Abra a janela de inspeção da página atual. E digite:

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

Então você não verá os links de URL na visualização de impressão.

— Wen Xin
fonte

Esta é uma boa solução se você não tiver controle sobre o código fonte da página que está tentando imprimir.

— Paddymac 11/11/19