Besoin de supprimer les valeurs href lors de l'impression dans Chrome

290

J'essaie de personnaliser le CSS d'impression et je trouve qu'il imprime des liens avec la hrefvaleur ainsi que le lien.

C'est dans Chrome.

Pour ce HTML:

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

Il imprime:

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

Et je veux qu'il imprime:

Google
css printing hyperlink print-css Chris Gratigny
la source
1
Gardez à l'esprit POURQUOI chaque framework CSS majeur fait cela - vous ne pouvez pas cliquer sur du papier! Donc, si vous voulez le désactiver, vous devez ajouter une liste de liens en bas, comme ceci: alistapart.com/article/improvingprint
Julix
1
C'est vrai, mais je pense qu'il vaut mieux contrôler quand et où le lien apparaît. Par exemple, dans mes liens, je veux qu'ils apparaissent dans la ligne suivante après le texte, et sans parenthèses. Je montre donc simplement l'url dans le texte.
user4052054

Réponses:

602

Bootstrap fait la même chose (... que la réponse sélectionnée ci-dessous).

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

Retirez-le simplement de là ou remplacez-le dans votre propre feuille de style d'impression:

@media print {
  a[href]:after {
    content: none !important;
  }
}
Alex Ghiculescu
la source
17
<style>@media print{a[href]:after{content:none}}</style>Surtout pour moi quand je reviens sur cette page, merci
William Entriken
1
Apparemment, Foundation fait la même chose.
spasticninja
On dirait que HTML5 Boilerplate fait aussi ça! Je suppose donc que je dois le remplacer par un changement de code sur mon propre site Web et par l'inspecteur sur d'autres sites Web ...
ADTC
Avertissement: nous avons rencontré des problèmes où une table perdait parfois les dernières lignes lors de l'impression. Il s'est avéré que cette règle était le coupable, ou du moins la supprimer a résolu le problème. Je ne sais pas pourquoi cela a eu cet effet.
Henrik N
1
@HenrikN - je pense que cela est lié au flottement des colonnes d'amorçage. en utilisant float:nonesi nécessaire, j'ai résolu un problème similaire il y a quelques semaines; pourrait vous aider, mais c'est un problème différent
Andrew
40

Ce n'est pas le cas . Quelque part dans votre feuille de style d'impression, vous devez avoir cette section de code:

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

La seule autre possibilité est que vous ayez une extension qui le fasse pour vous.

Eric
la source
1
Je l'ai eu dans la fondation zurb css.
forX
26 

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}
Développer l'extrait

Le travail est parfait.

JELEWA.de
la source
10

Si vous utilisez le CSS suivant

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

il suffit de le changer dans le style suivant en ajoutant 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" />

Je pense que cela va fonctionner.

les anciennes réponses comme 

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

n'ont pas bien fonctionné dans le navigateur Chrome.

Wang Jijun
la source
4

J'ai rencontré un problème similaire uniquement avec une img imbriquée dans mon ancre:

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

Quand j'ai postulé 

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

J'ai perdu mon img et la largeur totale de l'ancre pour une raison quelconque, alors j'ai plutôt utilisé:

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

qui a parfaitement fonctionné.

Astuce bonus : inspecter l'aperçu avant impression

TrampGuy
la source
1

Pour masquer l'URL de la page.

utiliser media="print"dans l'exemple de style tage:

<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 vous souhaitez supprimer des liens: 

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}
Abd Abughazaleh
la source
-2

Pour les utilisateurs normaux. Ouvrez la fenêtre d'inspection de la page actuelle. Et saisissez:

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

Ensuite, vous ne verrez pas les liens URL dans l'aperçu avant impression.

Wen Xin
la source
C'est une bonne solution si vous n'avez aucun contrôle sur le code source de la page que vous essayez d'imprimer.
Paddymac