Imprimer dans une page HTML

Sujet résolu

17 avril 2009 à 22:11:14

Bonsoir,

j'aimerai que le visiteur puisse imprimer un certain texte dans ma page html (ou plutot un tableau), j'avais penser a du PHP mais on m'a finalement dit d'utiliser du JS (windows.print()).

Le souci, c'est que j'y connais absolument rien en JS... Je ne sais meme pas ou mettre print()

Donc... merci de m'aider

Lost17

22 avril 2009 à 23:54:10

Up !

Davilink

23 avril 2009 à 4:03:08

facile

window.print() demande d'imprimer la page.

la feuille de style

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

le plus important est la balise media

Screen: l'affichage à l'écran
print: lors de l'impression
handled: Pour les PDA (À confirmer)

<html>
<head>
<title>La page</title>
<style type="text/css" media="print">
#idDuTexte
{
/*Marque ici les propriété que le texte doit avoir pour qu'il soit imprimer comme tu le veux*/
}
</style>
</head>
<body>
salut tous le monde
<div id="idDuTexte">
Vous voyez comment je suis écris, mais lorsque vous allez m'imprimer , je ne serais pas pareil comme vous me voyez</div>
</body>
</html>

voici un exemple que tu peux essayer:
(un truc clique sur apercu avant impression a place d'imprimer pour rien)

<html>
    <head>
        <title>Page d'exemple</title>
        <style type="text/css" media="screen">
        #allo
        {
        color: blue;
        background-color: black;
        }
        
        #cacher
        {
        display: none;
        }
        </style>
        
        <style type="text/css" media="print">
        #allo
        {
        color: red;
        }
        
        #cacher
        {
        display: block;
        }
        </style>
    </head>
<body>
<div id="allo">
Je suis magique
</div>
<div id="cacher">
Je ne suis pas supposer être cacher ??
</div>
</body>
</html>

Anonyme

23 avril 2009 à 4:21:23

Ouep important la feuille de style pour l'impression.

Si je me souviens bien, handled ne sers à rien, c'est pas reconnu par les mobiles et pda ; faut fouiller quirksmode.org pour en être bien sûr.

En ce qui concerne le boutton en lui même il faut, à placer à la fin de ta page, juste avant </body>

<!-- il te faut un conteneur pour le boutton -->
<div id="impression"></div>

<!-- tout à la fin le script à placer -->
<script type="text/javascript">
var boutton = document.createElement("button");
boutton.type = "button";
boutton.onclick = function () {window.print();};
boutton.appendChild(document.createTextNode("Imprimez"));
document.getElementById("impression").appendChild(boutton);
</script>

birdy42

23 avril 2009 à 8:20:07

@nod_ : j'ai l'impression que tu compliques mais bon

c'est pour l'accessibilité... (j'ai failli te demander pourquoi tu faisais comme ça et pas directement dans le code... )
Pour sa question, en fait, c'est qu'il veut imprimer juste une partie de la page, pas tout...
L'astuce, ce serait de tout cacher dans ton CSS "print" et d'afficher uniquement le tableau que tu veux imprimer (en testant d'abord simplement en l'affichant à l'écran (remplacer print par screen); tu vas pas l'imprimer 50 fois juste pour que ça marche

)

Anonyme

23 avril 2009 à 10:48:54

vi, y'a pas d'autre moyen pour imprimer une partie de page.

Pour le code, autant montrer comment utiliser le DOM dès le début

frdiard

23 avril 2009 à 10:56:18

tu pourrais aussi créer à part une page html avec uniquement ton tableau et la feuille css pour l'impression, et lors du clic sur le bouton d'impression, faire appel à cette page.

En fait je dis ça mais je sais même pas si cela est réalisable

Les autres vous en pensez quoi ?

loacast

23 avril 2009 à 10:56:30

Le plus simple pour avoir un design épuré est de faire un fichier (ou template dans le cas où ton application est basé là-dessus) spécifique à l'impression qui va rechercher dans la base de données uniquement les informations qui t'intéressent.

Celle solution permet d'avoir non seulement un style différent, mais aussi d'avoir une structure différente !

C'est donc particulièrement efficace.

frdiard

23 avril 2009 à 11:01:25

Je suis d'accord avec toi, Loacast

Je pense que c'est la méthode la plus simple pour avoir un rendu correct sans trop bidouiller avec les feuilles de styles

Lost17

24 avril 2009 à 13:27:35

Ok ! j'opte pour l'appel a la nouvelle page que je vais donc imprimer mais comment on imprime une page en entier ?

windows.print() je le mets ou ??

Anonyme

24 avril 2009 à 13:33:05

*voir mon bout de code plus haut*

Lost17

24 avril 2009 à 14:13:01

Ben je veux bien mais aucun bouton n'apparait...

EDIT : OUPS, non faute de frappe, le bouton apparait

Golmote

24 avril 2009 à 14:23:05

Mets le sujet en résolu alors

Lost17

24 avril 2009 à 14:52:00

Non, non ! J'ai un autre probleme

En fait, j'aimerai pouvoir récupérer a partir de checbox ce qu'il faut imprimer... ainsi en cliquant sur le bouton j'imprime seulement ce qui est coché...
Voici la page en question pour mieux comprendre : http://www.video-65.com/print.php

Merci d'avance

frdiard

24 avril 2009 à 15:15:17

Ton lien affiche "Aucun films dans vos préférences..." ? o_O

loacast

24 avril 2009 à 15:20:26

Oh my god !

On dirait les graphismes des sites d' il y a 15 ans.

Tu as pas la honte de poster le lien sur le net ?

Lost17

24 avril 2009 à 15:39:10

m**de, c'est normal.. (ca fonctionne avec les cookies...)

Donc retournez y vous devriez voir 4 films

Pour le graphisme, je n'ai pas encore mis de CSS donc normal que ce soit horriblement moche

frdiard

24 avril 2009 à 16:20:31

en fait, tu veux pouvoir cocher une ou plusieurs checkbox ?

Lost17

24 avril 2009 à 16:35:14

Peut etre me suis je mal exprimé :euh:

Le visiteur arrive sur cette page et coche/décoche les films qu'il veut (sachant que ceux cochés seront imprimés).

Et j'aimerai qu'une information soit envoyée au code JS pour lui dire, "Attends ! N'imprimes pas tout mais seulement les films cochés !"

Davilink

24 avril 2009 à 16:36:57

Si tu adopte la nouvelle page alors le css print ne te serviras pas. La tu vas plutot du coter php.

Tu peux faire :

tu envois les info via formulaire et ensuite php prend ces informations et affiche seulement ceux qui ont été reçu et ensuite tu imprime via le bouton.

ou
À l'aide du JavaScript et une feuille de style:

lorsqu'on clique sur les cases ça change la class de la ligne et via la feuille de style (print) elle affiche seulement ceux là, lors de l'impression.

Lost17

24 avril 2009 à 16:59:52

Ah ben oui c'est sur que le CSS print ne me servira plus >_<

!

C'est parfait ! Merci a tous !

Probleme resolu !