web-dev-qa-db-fra.com

Imprimer un site Web sans imprimer les emplacements des liens?

J'invoque la fonction d'impression du navigateur à l'aide d'un simple window.print (); appel. Il s'imprime parfaitement (je veux imprimer le même que je vois à l'écran, donc je n'utilise pas vraiment de CSS spécial pour imprimer) mais il montre les emplacements des liens à côté du lien texte, quelque chose comme:

    Homepage (http://localhost)

Pour être plus clair: je ne veux pas avoir les emplacements des liens près des liens dans la version imprimée, j'ai le contrôle sur le CSS mais je ne trouve pas ce comportement défini nulle part, donc je pense que c'est un problème lié au navigateur!

EDIT: Cela se produit sous Firefox 3.6.8 et le dernier Chrome, sur Ubuntu et Windows XP/Vista.

javascripthtmlcssprinting
32
Adirael

Semble que vous imprimez une page avec ce style à partir d'un navigateur compatible CSS2

http://www.alistapart.com/articles/goingtoprint/

Dans un navigateur entièrement conforme à CSS2, nous pouvons insérer entre parenthèses les URL des liens après chacun, les rendant ainsi assez utiles pour quiconque a une copie de l'impression et un navigateur Web à portée de main. Voici la règle, qui limite cet effet au div "contenu" et évite ainsi de coller une URL dans le masthead:

#content a:link:after, #content a:visited:after {    
  content: " ("attr(href) ") ";    
  font-size: 90%;   
}

Essayez-le dans un navigateur basé sur Gecko, comme Mozilla ou Netscape 6.x. Après chaque lien dans l'impression, vous devriez voir l'URL du lien entre parenthèses.

23
mplungjan

Par conséquent, pour éviter l'impression supplémentaire d'informations de lien dans une page Web imprimée, ajoutez les règles suivantes à la section @media print:

a:link:after, a:visited:after {
    content: "";
}

Cela supprimera les informations de lien laides comme Homepage (http://localhost) et les réduira à Homepage. Vous pouvez bien sûr ajouter des règles pour l'éviter uniquement dans la section de texte (ou uniquement dans la navigation, mais vous ne devez pas afficher la navigation dans le format d'impression de votre page Web.

46
mliebelt

contenu: ""; ne fonctionne pas j'utilise ceci:

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";    
    }
}

Cela fonctionne pour désactiver!

12
Dajo

L'utilisation actuelle de la propriété de contenu devrait fonctionner dans tous les principaux navigateurs.

    @media print  - or -  <style type="text/css" media="print">

    a:link:after, a:visited:after {  
        content: normal; //TODO: add !important if it is overridden  
    }

Plus d'options ici: Contenu CSS .

Des façons plus utiles d'utiliser l'attribut content ici: Astuces CSS

7
tgursk

Mon serveur d'applications (Rails) m'a obligé à utiliser un sélecteur de parents. L'élément body est parfait pour sélectionner ce qui devrait être la page entière.

body a:link:after, body a:visited:after {    
  content: "";
}
5
coloradoblue

Pour toute personne utilisant Bootstrap 3, le sélecteur utilisé est:

a[href]:after { }

Et peut être remplacé par quelque chose comme:

a[href]:after {
   content: initial;
}
4
Mike Chelen

J'ai trouvé que les autres solutions ne fonctionnent pas (plus) entre les navigateurs. Les éléments suivants fonctionnent dans FF 29, Chrome 35, IE 11:

a:link:after, a:visited:after {  
  content: normal !important;  
}
3
Jeroen K

Bien que de nombreuses options CSS aient été suggérées, si vous souhaitez vous débarrasser des liens et des en-têtes dans l'en-tête/pied de page qui sont forcés sur chaque page, il existe un paramètre juste pour vous. Comme indiqué ci-dessous.

Remove Footer Links in Chrome Print View

C'est ça.

1
Mohd Abdul Mujib

Utilisez du CSS supplémentaire pour l'impression.

Voir ici: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

1
Mchl

L'ajout de cela vous aidera à supprimer ces liens indésirables

<style type="text/css" media="print">
@page 
{
    size: auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}

La lecture de ceci aidera

1
Rudias

J'ai rencontré le même problème, si vous utilisez du chrome, l'astuce est lors de l'affichage de la fenêtre d'impression, celle-ci contient un panneau de configuration gauche qui donne une configuration du mode d'affichage et d'autres, il y a un lien ci-dessous nommé: plus de paramètres ou plus config (j'avais en français donc j'ai essayé de le traduire), cliquez dessus après cela il affichera quelques options supplémentaires, parmi eux, il y a une case à cocher "en-tête et pied de page" décochez-la, et cela masquera le "localhost". ... "j'espère que cela vous aidera

0
krachleur

J'ai trouvé le CSS mentionné et l'ai supprimé, mais cela n'a pas aidé, et je ne l'ai trouvé nulle part ailleurs dans le projet, j'ai donc utilisé jQuery pour supprimer les liens tout en conservant le texte.

$('a[title="Show Profile"]').contents().unwrap();

Plus d'informations ici Supprimer l'hyperlien mais garder le texte?

0
Clinton Green