css - para - Necesidad de eliminar los valores href al imprimir en Chrome

href html ejemplos

Question

Estoy intentando personalizar el CSS de impresión, y encontré que imprime enlaces con el valor href y con 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

Answer 1

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

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

Simplemente elimínelo de allí o anule en su propia hoja de estilo de impresión:

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

Answer 2

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 anclaje por alguna razón, así que en su lugar usé:

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

que funcionó a la perfección.

Punta de bonificación : inspeccionar vista previa de impresión

Answer 3

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

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

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

Answer 4

Si usas 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 = "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" />

Creo que funcionará.

las respuestas anteriores como

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

No se trabajaron bien en el navegador de cromo.

Answer 5

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 tengas una extensión que lo haga por ti.

Answer 6

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

El trabajo es perfecto.