Comment faire en sorte qu'une page Web envoie à l'imprimante quelque chose de différent de ce qu'il y a dans la fenêtre du navigateur?

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

Question

Google Maps avait l'habitude de faire ce bit là où vous frappez le " Imprimer " lien, ce qui serait envoyé à l’imprimeur n’était pas exactement ce que vous aviez à l’écran, mais plutôt une version différemment formatée contenant essentiellement les mêmes informations.

Il semble qu'ils se soient largement éloignés de ce concept (je suppose que les gens ne l'ont pas compris) et la plupart des sites Web ont une & "version imprimée &"; des choses comme des articles et ainsi de suite.

Mais si vous voulez créer une page Web telle qu'un & "imprimante facile &"; version de la page correspond à ce qui est envoyé à l’imprimante sans avoir à créer une page distincte, comment feriez-vous cela?

Suivi : pouvez-vous imprimer des éléments qui ne sont pas restitués sur la page? (c.-à-d. caché du rendu actuel)?

Était-ce utile?

La solution

Oui, vous pouvez appliquer un css d’imprimante. Il existe un bon article à ce sujet ici .

Autres conseils

Vous pouvez obtenir cet effet en créant une feuille de style css directement destinée à l’impression et une autre directement à l’écran.

Utilisez la balise de lien: 

<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

pour intégrer votre feuille de style dans votre document.

Pour masquer, rien de plus facile, définissez simplement votre style de bloc sur masqué dans la feuille de style de votre choix. Il ne sera pas affiché. Par exemple: 

.newStyle1 {
    display: none;
}

Alors tout ce qui est réglé sur le style de newStyle1 ne sera pas affiché.

Vous pouvez le faire avec le fichier css lorsque vous spécifiez le support d'impression.

La règle @media dans CSS peut être utilisée pour définir d'autres règles pour l'impression. Elle est souvent utilisée pour masquer la navigation et modifier le style afin de mieux adapter l'impression: 

@media print {
  .sidebar { display: none; }
}

Vous pouvez également lier une feuille de style distincte pour l'impression: 

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Si vous le souhaitez, vous pouvez également demander au bouton "Imprimer" de la page de modifier la page de la manière que vous souhaitez, puis exécutez la commande "window.print ();" javascript. pour afficher la boîte de dialogue d'impression du navigateur.

Plusieurs options s'offrent à vous:

  • Vous pouvez ouvrir une nouvelle fenêtre avec des données légèrement différentes à imprimer.
  • Il existe également des styles CSS que vous pouvez utiliser pour modifier la mise en page.
  • Enfin, vous pouvez spécifier des feuilles de style totalement différentes pour l’écran, les supports imprimés, les lecteurs braille, etc.

par exemple. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />

Voir aussi Référence d'impression CSS2

Utilisez une feuille de style d'impression .

Modifier: En ce qui concerne le suivi, vous ne pouvez pas, en général, ajouter d'éléments à une page avec CSS.

Une option consiste à inclure le contenu imprimé uniquement dans la page et à le masquer pour les feuilles de style d'écran. Assurez-vous cependant que la page reste logique sans CSS.

Une autre option consiste à utiliser le contenu généré, mais celui-ci n'est pas pris en charge par Internet Explorer 7 ou une version antérieure, et peut être relativement limité.

Si le contenu à imprimer uniquement est une image, vous pouvez l'échanger à l'aide de l'une des techniques de remplacement d'image les plus courantes.

Le moyen le plus simple consiste à utiliser les types de média CSS. Pour chaque fichier CSS que vous incluez, vous pouvez spécifier où il doit être utilisé: à l'écran, lors de l'impression, pour les ordinateurs de poche, pour les lecteurs d'écran, ou diverses combinaisons de ceux-ci.

Exemple: < link rel = " feuille de style " type = " texte / css " media = " impression, ordinateur de poche " href = & "; foo.css &"; >

Ceci est un standard depuis CSS2, et la plupart des navigateurs le supportent maintenant. Plus d'informations sont disponibles ici: http://www.w3.org/TR/CSS2/ media.html

CSS vous permet de créer des feuilles de style pour des types particuliers de supports, ce qui signifie que vous pouvez avoir une feuille de style qui ne s'applique que lorsque vous imprimez une page, ce qui vous permet de la mettre en forme différemment.

Il suffit d'inclure un média = " print " attribuer sur votre lien de feuille de style pour cette feuille de style.

Cet article sur la liste séparée semble être assez bon sur le sujet.

J’ai essayé d’utiliser différentes feuilles de style en fonction du support, mais j’ai eu du mal à trouver toutes les options dont j’avais besoin. index.php) qui est essentiellement le même fichier sauf qu'il définit un indicateur / une constante supplémentaire.

Dans le fichier XSL associé à la page, j'effectue ensuite un travail supplémentaire basé sur cet indicateur / constante, par exemple en laissant de côté le menu, les colonnes d'un tableau, etc.

i.e. (La page affiche un lien sur lequel l'utilisateur doit cliquer pour afficher le mot de passe à l'écran. Le mot de passe de la version imprimée est imprimé.) 

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

Vous pouvez définir des règles CSS spécifiques à un type de média. Voici un exemple css (copié à partir de http://www.w3.org/TR /CSS2/media.html , section 7.2.1) spécifiant différentes tailles de police, les éléments à afficher sur une page Web et les éléments à imprimer. 

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Vous pouvez également spécifier le support auquel une feuille de style doit être appliquée lors de son inclusion dans une page: 

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

Encore une autre option consiste à avoir un IFRAME caché sur lequel vous appelez iframe.contentWindow.print (). Cela vous permettra de créer une mise en page invisible qui s’imprime exactement comme vous le souhaitez.

Bien sûr, une solution encore meilleure consiste à exporter le fichier au format PDF et à permettre à l'utilisateur de l'imprimer de cette façon. Les PDF produisent la sortie de la plus haute qualité, période. Toutefois, il reste encore un cerceau que l’utilisateur doit parcourir. La règle générale est donc la suivante:

  • PDF pour les cas où la mise en page est importante
  • HTML lorsque le texte pur est plus important que la présentation

Tout ce que vous pouvez faire avec CSS peut être fait dans une feuille de style d'impression. Cela signifie que vous pouvez masquer le contenu de la version imprimée affichée dans la version d'écran ou masquer le contenu de la version d'écran que vous souhaitez afficher lors de l'impression. Tout ce que vous ferez, c'est d'appliquer l'affichage: aucun aux sections appropriées de la feuille de style appropriée.

En outre, il est judicieux de redimensionner votre texte en points pour la version imprimée (ce qui est une mauvaise idée pour la version d’écran - tenez-vous-en à des pixels, des em ou des pourcentages). Il existe un accord universel sur les tailles de points imprimées, où les mappages de pixels en points varient selon les appareils de résolution.

Voici un autre lien de A List Apart concernant l'impression en CSS appelé Impression d'un livre avec CSS: Boom! http://www.alistapart.com/articles/boom/

nsayer mentionne qu’un bouton d’impression modifie la disposition de votre écran, puis déclenche un window.print()

C’est une solution qui aura probablement été négligée par de nombreuses personnes et qui devrait être envisagée lorsque vous pensez que vos utilisateurs veulent un peu plus d’un WYSIWYG. Ce devrait probablement être un & Quot; imprimante facile & Quot; lien si cela change le type de support de vos feuilles plutôt que & "imprimer cette &";.

En utilisant jquery, vous pouvez faire quelque chose comme ceci (non cochée): 

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top