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

— Chris Gratigny
fuente

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

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

— Alex Ghiculescu
fuente

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.

— Eric
fuente

1

Lo tengo en zurb foundation css.

— forX

26

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

Expandir fragmento

El trabajo es perfecto.

— JELEWA.de
fuente

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.

— Wang Jijun
fuente

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

— Vagabundo
fuente

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

— Abd Abughazaleh
fuente

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

— Wen Xin
fuente

Esta es una buena solución si no tiene control sobre el código fuente de la página que está intentando imprimir.

— Paddymac