Es necesario eliminar los valores href al imprimir en Chrome


290

Estoy intentando personalizar el CSS de impresión y descubro que imprime enlaces con el hrefvalor y el enlace.

Esto está en Chrome.

Para este HTML:

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

Imprime:

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

Y quiero que se imprima:

Google

1
Tenga en cuenta POR QUÉ cada marco CSS importante hace eso: ¡no puede hacer clic en papel! Entonces, si va a desactivarlo, debe agregar una lista de enlaces en la parte inferior, como esta: alistapart.com/article/improvingprint
Julix

1
Eso es cierto, pero creo que es mejor tener control de cuándo y dónde aparece el enlace. Por ejemplo, en mis enlaces quiero que aparezcan en la siguiente línea después del texto, y sin paréntesis. Así que solo muestro la url en el texto.
user4052054

Respuestas:


602

Bootstrap hace lo mismo (... como la respuesta seleccionada a continuación).

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

Simplemente quítelo de allí o anúlelo en su propia hoja de estilo de impresión:

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

17
<style>@media print{a[href]:after{content:none}}</style>Sobre todo publicando para mí cuando vuelvo a esta página, gracias
William Entriken

1
Aparentemente, la Fundación también hace lo mismo.
spasticninja

¡Parece que HTML5 Boilerplate también hace esto! Así que supongo que tengo que anularlo a través del cambio de código en mi propio sitio web, y a través del Inspector en otros sitios web ...
ADTC

Advertencia: tuvimos problemas en los que una tabla a veces perdió las últimas filas al imprimir. Resultó que esta regla era la culpable, o al menos eliminarla solucionó el problema. No sé por qué tuvo ese efecto.
Henrik N

1
@HenrikN: creo que está relacionado con las columnas de arranque flotantes. usando float:nonecuando fue necesario me solucionó un problema similar hace unas semanas; podría ayudarlo, pero ese es un tema diferente
Andrew

40

No lo hace . En algún lugar de su hoja de estilo de impresión, debe tener esta sección de código:

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

La única otra posibilidad es que tenga una extensión que lo haga por usted.


1
Lo tengo en zurb foundation css.
forX

26

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

El trabajo es perfecto.


10

Si usa el siguiente 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" />

simplemente cámbielo al siguiente estilo agregando media = "pantalla"

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

Creo que funcionará.

las respuestas anteriores como

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

no funcionaron bien en el navegador Chrome.


4

Encontré un problema similar solo con un img anidado en mi ancla:

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

Cuando apliqué

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

Perdí mi img y todo el ancho del ancla por alguna razón, así que en su lugar usé:

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

que funcionó perfectamente

Consejo adicional : inspeccione la vista previa de impresión


1

Para ocultar la URL de la página.

uso media="print"en estilo tage ejemplo:

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

Si quieres eliminar enlaces:

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

-2

Para usuarios normales. Abra la ventana de inspección de la página actual. Y escribe:

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

Entonces no verá los enlaces de URL en la vista previa de impresión.


Esta es una buena solución si no tiene control sobre el código fuente de la página que está intentando imprimir.
Paddymac
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.