18043 sujets

Questions générales et questions de débutants

[résolu] Lien pour imprimer

Bonjour à tous

Je cherche à créer un lien sur ma page qui permette à l'internaute d'imprimer directement celle-ci

Et j'ai trouvé ici :

a écrit :
Imprimer
Code à utiliser:<a href="#" OnClick="javascript:window.print()">Imprimer</a>

Mais avec le doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...la page n'est plus valide.

Existe-t-il un code en Xhtml/Css sans passer par le javasript ?

Merci

--
Serge Smiley smile
Modifié par Serge (29 Sep 2007 - 06:25)
Bonjour Serge,

Pour faire un tel "lien", tu es obligé de passer par du JavaScript.

Pour ta question, voici comment rendre valide cette portion de code ; pas de majuscules pour onclick :


<p><a href="#" onclick="javascript:window.print()">Imprimer</a></p>


Bonne continuation. Romain

PS : Il me semble que ce "genre" de lien (impression, ajout aux favoris ...) est vivement déconseillé (... liberté de l'utilisateur). Je laisse cette considération à des personnes plus informées sur ceci. Smiley langue
Modifié par yodaswii (15 Sep 2006 - 11:17)
Bonjour,

On peut philosopher pendant des heures sur la pertinence de cette réplication dans la page Web d'une fonction native des navigateurs (enfin, plus exactement d'une partie des navigateurs).

Mais l'essentiel est plutôt de ne pas passer à côité du problème plus immédiat: ce lien n'a de sens que lorsque javascript sera supporté et activé. Il ne devrait donc pas apparaître lorsque ce n'est pas le cas.

Pour cela, il suffit de le générer lui-même via javascript (excellent exercice d'initiation au DOM Smiley cligne ), au lieu de l'écrire "en dur" comme ci-dessus...
Modifié par Laurent Denis (15 Sep 2006 - 08:33)
Merci à vous deux.

Romain, le but sur cette page "message" est que l'internaute imprime directement un rendu correct sans les menus, pied de page, ou même le fond bleu de background, et ceci sans ne rien connaitre aux paramétrages des navigateurs.

Ce lien à placer dans le body est-il utile ?
a écrit :
<div id="imprimer_message"><p><a href="#" onclick="javascript:window.print()">Imprimer</a></p>
</div>

ou est-ce que le codage Xhtml/Css avec les link séparés media="screen" et media="print" est il suffisant pour lancer une impression correcte depuis le navigateur ?


Laurent,
a écrit :
Pour cela, il suffit de le générer lui-même via javascript (excellent exercice d'initiation au DOM cligne ), au lieu de l'écrire "en dur" comme ci-dessus...

Peux-tu nous donner encore un indice s'il te plait ?
Et ton avis pour mon but à atteindre ?

Je vous remercie de cette aide,

Serge
Modifié par Serge (15 Sep 2006 - 10:13)
J'arrive avec une deuxième question dans ce topic :

J'essaye de préparer la page d'impression d'après le livre CSS 2 de Raphaël G. et les topics d'Alsa + Blog & Blues, mais je ne trouve pas comment utiliser class="noprint" dans le code html.

Comment rendre un div invisible à l'impression ?

a écrit :
<div id="ariane_message"><p id="ariane"><strong>Accueil</strong> / <strong>Message du 11 septembre 2006</strong></p></div>

devient :

a écrit :
<div class="noprint "id="ariane_message"><p id="ariane"><strong>Accueil</strong> / <strong>Message du 11 septembre 2006</strong></p></div>

Est-ce juste ?

Merci pour la réponse et aussi pour celle du post au dessus !

--
Serge Smiley biggrin
Modifié par Serge (15 Sep 2006 - 10:12)
Re-bonjour,

window.print() "simule" simplement la fonction d'impression du navigateur et n'a par conséquent aucun impact sur le rendu de la sortie papier (les règles css ne sont aucunement remises en causes).

Concernant le lien d'impression, tu peux te passer de la balise div et mettre directement l'id ("imprimer_message") sur le p.

Concernant la (très bonne Smiley cligne ) remarque de Laurent Denis, ce lien ne doit pas être mis tel quel dans la partie body (si le javascript est désactivé sur le poste client : ce lien n'a aucune utilité ; aucun résultat).

Solution Javascript :

Déclaration d'un fichier externe JS (entre <head></head>)

<script type="text/javascript" src="imprimer.js"></script>


Fichier externe JS (remplacer les "..." par le lien d'impression à insérer) :

function proposerImpression()
{
document.write("...");
}


Puis dans le code HTML (à l'endroit où le lien doit être affiché) :

<!-- Insertion du lien d'impression -->
<script type="text/javascript">
proposerImpression();
</script>


Bonne continuation. Romain

PS : Il me semble (encore une fois Smiley biggol ) que le document.write appartient à un temps quelque peu révolu (quelqu'un me corrigera si il y'a lieu Smiley cligne ) ...
Re-re Bonjour,

Pour ce qui est de rendre un élément invisible à l'impression (désolé, je n'ai pas consulté les différentes ressources citées (le livre CSS 2 & le blog de Laurent Denis)) ... A première vue, je procéderai comme suit :

Code CSS (sélecteur d'attribut class ou id au choix) :


@media print
{
.maclass, #monid
{
display: none;
}
}


En attendant, si nécessaire, des remarques plus pertinentes par des personnes plus expérimentées que moi concernant le couple css/impression ... Smiley langue

Romain
Modifié par yodaswii (15 Sep 2006 - 11:15)
Merci Romain

Raphaël propose :
a écrit :
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

et

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

à placer dans le "head" du Xhtml, avec des <p class="noprint"> ou <div class="noprint"> pour des éléments à supprimer de l'impression dans le "body".

Et dans le fichier CSS :
a écrit :
Fichier imprimante .css
.noprint {
display: none;
}


Question : est-il possible de se passer de l'utilisation du javascipt ?
Et même généré par lui même ?

Merci Laurent aussi pour ta réponse.

Ici dans Blog & Blues, il est question de laisser la possibilité d'un choix d'impression par l'utilisateur, ce qui n'est pas mon objectif sur cette page où la plupart des lecteurs veulent surtout le texte et ne connaissent rien à l'informatique.

--
Serge
Salut,
Serge a écrit :
où la plupart des lecteurs veulent surtout le texte et ne connaissent rien à l'informatique.

C'est vrai que Fichier>Imprimer, c'est d'une puissance absolue, j'ai du faire une maitrise pour apprendre ça. C'est toujours sympa de voir les gens qui prennent leur visiteurs pour des idiots...
Bonjour Serge,

Bon apparemment, tout est ok ...

Pour l'impression, tu utilises une CSS externe avec le média print (c'est la même chose que ce que j'ai fais en utilisant la règle @media print ; l'effet est le même). Il te suffit juste de doter les différents éléments HTML (que tu ne souhaites pas laisser à l'impression) de la classe "noprint" (class="noprint").

Pour ta question sur si il est possible de se passer de Javascript, je ne vois pas trop pourquoi tu ne pourrais pas l'utiliser ici : si Javascript est désactivé le lien pour imprimer ne sera pas présent laissant ainsi ton document totalement exploitable ...

Romain
Modifié par yodaswii (15 Sep 2006 - 18:51)
Modérateur
Salut,

Javascript est le langage par excellence pour converser avec les fonctions du navigateur donc autant s'en servir, c'est lui le mieux placé pour cette tâche...

Le document.write dans un fichier externe... euh... essaye ! Smiley lol

En gros, il faut créer un lien et le texte qu'il contient à l'aide des méthodes et propriétés createElement, setAttribute et createTextNode. De là, il faut insérer le texte dans le lien puis le lien dans le document via la méthode appendChild, par exemple.
Ensuite, il faut appliquer la fonction print lorsqu'on clique sur ce lien.
On englobe le tout dans une fonction puis au chargement de la page (window.onload), on lance la fonction.

>> pour le cours de DOM, c'est par ici : http://nyams.planbweb.com/tutorial-dom-14.html
et par là : http://gilles.chagnon.free.fr/cours/dhtml/index.html

et pour la référence Javascript (et autres), c'est par là : http://www.gotapi.com/

Bon apprentissage... Smiley ravi
Modifié par koala64 (15 Sep 2006 - 19:47)
Je me dois de rebondir Smiley biggol sur cela Smiley cligne :

a écrit :

koala64 a écrit :
Le document.write dans un fichier externe... euh... essaye !


Réponse : ben ... ça marche Smiley cligne !

Romain.

PS : par contre j'ai pas dis que c'était "clean-clean" ... ta solution étant plus aboutie (bien que le résultat soit le même).
Modifié par yodaswii (15 Sep 2006 - 19:56)
Modérateur
pas tout à fait non... Ta page ne serait pas un petit peu blanche mis à part ce que tu as mis dans le document.write ? Smiley lol
Ah d'accord ... en effet ! Enfin là c'était juste histoire de montrer le principe ... (à vrai dire je n'utilise jamais document.write ...) Smiley langue

Edit : le document.write ne remplace pas le contenu du body du document html ... je ne vois finalement pas le problème ...
Modifié par yodaswii (15 Sep 2006 - 20:11)
Modérateur
ben si...

Essaye çà :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<script type="text/javascript" src="script.js"></script>
	</head>	
	<body>
		<p>coucou</p>
	</body>
</html>


script.js

var test =
{
	clean: function()
	{
		document.write('salut');
	}
};
window.onload = test.clean;

Modifié par koala64 (15 Sep 2006 - 20:14)
Dans ce contexte : oui, le contenu du body est totalement remplacé ...

Pour ce qui est des quelques lignes de code que j'ai posté ci-dessus il diffère du fait que je fais appel à une fonction js "proposerImpression" (au document.write) au sein même du code html (ancienne méthode : pas bien je le ferai plus Smiley sweatdrop ; moi qui suit pour la séparation contenu/presentation/comportement) :


<body>
<p>Un paragraphe, ...</p>
<!-- Insertion du lien d'impression -->
<script type="text/javascript">proposerImpression();</script>
</body>


En tout cas, je te l'accorde ta façon de faire est la meilleure ; j'ai surtout poster ces quelques lignes pour montrer comment procéder ...

Romain
Modifié par yodaswii (15 Sep 2006 - 20:25)
Bonjour à tous,

L'objectif de Serge est d'éviter l'impression des choses inutiles sur papier (au départ)

Javascript va lui donner de mauvaises idées !
Smiley lol

Une feuille de style pour l'impression me semble être suffisant.
Effectivement, l'impression d'une page web ne relève pas d'un niveau technique très élévé !
Smiley cligne
Sujet clos
Aller à