Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP imprimer une partie d'une page

imprimer une partie d'une page

12 réponses
Avatar
Une Bévue
J'ai une page qui se présente comme ça :
<html>
<head>...</head>
<body>
<header>...</header>
<div id="page_statistiques" class="page" style="display:
none;">...</div>
<div id="page_recherche" class="page" style="display:
none;">...</div>
<div id="page_pages" class="page" style="display: none;">...</div>
<div id="page_page" class="page">
<h3 class="page_title">...</h3>
<div id="div_page_notes" style="display: none;">...</div>
<div class="iframe">
<iframe src="..." name="..."></iframe>
</div>
</div>
<div id="notification_outer" class="notification_outer">...</div>
</div>
</body>
</html>

où je ne souhaite imprimer que le contenu de l'iframe.

J'ai fait un premier essai css (qui aurait du n'imprimer que le contenu
de l'iframe) :
@media print {
* { display: none; }
iframe { display: inline; }
}
et un second (qui aurait du n'imprimer que le contenu de la div de class
'iframe') :
@media print {
* { display: none; }
.iframe, iframe { display: inline; }
}

pour ces deux versions quand je fais un pom+P j'obtiens le message suivant :
"La prévisulisation de l'impression a échoué"
dans la fenêtre de dialogue qui s'ouvre et je ne peux pas enregistrer le
document pdf.

Une idée d'où vient ce pb ?
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 17/09/15 11:32, Une Bévue a écrit :
J'ai une page qui se présente comme ça :
<html>
<head>...</head>
<body>
<header>...</header>
<div id="page_statistiques" class="page" style="display:
none;">...</div>
<div id="page_recherche" class="page" style="display:
none;">...</div>
<div id="page_pages" class="page" style="display: none;">...</div>
<div id="page_page" class="page">
<h3 class="page_title">...</h3>
<div id="div_page_notes" style="display: none;">...</div>
<div class="iframe">
<iframe src="..." name="..."></iframe>
</div>
</div>
<div id="notification_outer" class="notification_outer">...</div>
</div>
</body>
</html>

où je ne souhaite imprimer que le contenu de l'iframe.

J'ai fait un premier essai css (qui aurait du n'imprimer que le contenu
de l'iframe) :
@media print {
* { display: none; }
iframe { display: inline; }



iframe { display: block; }
/* ou :
iframe { display: inline-block }
non ?
*/

}
et un second (qui aurait du n'imprimer que le contenu de la div de class
'iframe') :
@media print {
* { display: none; }
.iframe, iframe { display: inline; }



heu ... block ?

il faudrait sans-doute pouvoir adresser une FdS directement au fichier
contenu dans l'iframe
Je doute que les CSS du document contenant l'iframe puisse en gérer
celles du document y ouvert.

}

pour ces deux versions quand je fais un pom+P j'obtiens le message
suivant :
"La prévisulisation de l'impression a échoué"
dans la fenêtre de dialogue qui s'ouvre et je ne peux pas enregistrer le
document pdf.

Une idée d'où vient ce pb ?



ne viendrait-ce pas des restrictions JavaScript (et probablement des
Navigateurs) quant aux iframes ?

As-tu essayé la même css pour media screen ?
voir à voir ...


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 20/09/15 11:13, SAM a écrit :
Le 17/09/15 11:32, Une Bévue a écrit :

Une idée d'où vient ce pb ?





Sans attribut de style dans les balises, le corrigé :

<!DOCTYPE html><html>
<head>
<title>imprime iframe</title>
<style>

body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }

iframe { width: 80%; height: 500px; margin: auto; border: 1px red solid;
background: yellow }
</style>
</head>
<body>
<header>...</header>
<div id="page_statistiques" class="page" > div stats </div>
<div id="page_recherche" class="page"> recherche </div>
<div id="page_pages" class="page">page</div>
<div id="page_page" class="page">
<h3 class="page_title">titre 3</h3>
<div id="div_page_notes">notes</div>
<div class="iframe">
<iframe src="#" name="maFrame"></iframe>
</div>
</div>
<div id="notification_outer"
class="notification_outer">.notifs..</div>
</body>
</html>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 21/09/2015 16:44, SAM a écrit :

Sans attribut de style dans les balises, le corrigé :

<!DOCTYPE html><html>
<head>
<title>imprime iframe</title>
<style>

body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }

iframe { width: 80%; height: 500px; margin: auto; border: 1px red solid;
background: yellow }
</style>
</head>
<body>
<header>...</header>
<div id="page_statistiques" class="page" > div stats </div>
<div id="page_recherche" class="page"> recherche </div>
<div id="page_pages" class="page">page</div>
<div id="page_page" class="page">
<h3 class="page_title">titre 3</h3>
<div id="div_page_notes">notes</div>
<div class="iframe">
<iframe src="#" name="maFrame"></iframe>
</div>
</div>
<div id="notification_outer"
class="notification_outer">.notifs..</div>
</body>
</html>


Cordialement,



OK, merci beaucoup, je teste ça asap...
Avatar
Une Bévue
Le 21/09/2015 16:44, SAM a écrit :
Sans attribut de style dans les balises, le corrigé :



bon, après test, il s'avère que ça ne marche pas vraiment.
je m'explique, dans l'iframe seule une partie de la page html contenue
est affichée, et c'est cette partie qui est envoyée au print et non la
totalité de la page :
<http://www.cjoint.com/doc/15_09/EIzp1hVTeNX_15-09-25-17-45-23-Recettes-print-iframe-on-mbp.png&gt;

j'ai essayé de changé le height en 100% pour @media screen comme pour
@media print, ça ne change rien.
Avatar
SAM
Le 25/09/15 17:54, Une Bévue a écrit :
Le 21/09/2015 16:44, SAM a écrit :
Sans attribut de style dans les balises, le corrigé :



j'ai essayé de changé le height en 100% pour @media screen comme pour
@media print, ça ne change rien.



vérifier que les préf d'impression sont réglées à 100%

puis :

@media print {
iframe { height: 28cm; width: 20cm; }
}

et ... amusant (ça zoom l'intérieur de l'iframe):

@media print {
iframe { height: 35cm; width: 25cm; }
}

(essayé seulement avec Fx)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 25/09/2015 22:38, SAM a écrit :

@media print {
iframe { height: 28cm; width: 20cm; }
}

et ... amusant (ça zoom l'intérieur de l'iframe):

@media print {
iframe { height: 35cm; width: 25cm; }
}




Ouais, super, merci beaucoup, ça roule super.

Reste à régler un ch'ti problème : c'est la grosse marge en début de
première page.

Dans le cas essayé si la marge était faible il n'y aurait pas eu de page
n° 2.

Page 1 :
<http://www.cjoint.com/doc/15_09/EIAgNcEDsIX_15-09-26-08-33-52-Recettes-print-iframe-page-1-on-mbp.png&gt;

Page 2 :
<http://www.cjoint.com/doc/15_09/EIAgOKkA45X_15-09-26-08-34-38-Recettes-print-iframe-page-2-on-mbp.png&gt;

Mais peut-être faudrait-il qqc de + sioux pour les marges, mon css actuel :
@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}
Avatar
Une Bévue
Le 26/09/2015 08:42, Une Bévue a écrit :
Mais peut-être faudrait-il qqc de + sioux pour les marges, mon css actuel :
@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}



je viens d'essayer ça :
@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe {
height: 28cm;
width: 20cm;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border: 1px red solid;
background: yellow
}
}

ça ne change rien...
j'ai ajouté aussi position: absolute et top: 1cm;
ça ne change rien non + :
@media print {
body * {
font-family: arial;
display: none;
}
#page_page, .iframe, iframe {
display: block;
}
iframe {
position: absolute;
height: 28cm;
width: 20cm;
top: 1cm;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border: 1px red solid;
background: yellow
}
}
Avatar
Une Bévue
Le 26/09/2015 10:42, Une Bévue a écrit :
Le 26/09/2015 08:42, Une Bévue a écrit :

ça ne change rien...
j'ai ajouté aussi position: absolute et top: 1cm;



bon, une solution "bidouillée" :
@media print {
body * {
font-family: arial;
display: none;
margin: 0px;
}
#page_page, .iframe, iframe {
display: block;
margin: 0px;
margin-top: -1mm;
padding: 0px;
}
iframe {
size: 29.7cm 21cm;
height: 29.7cm;
width: 21cm;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0px;
border: 1px red solid;
background: yellow
}
}

donc ajout d'un "margin-top: -1mm;" donc légérement négative cette marge
et ça a l'air de rouler dans les cas testés excepté le fait que ça coupe
en bas sur une seule page...

à approfondir donc ...
les marges semblent jouer bizarrement, là je n'ai testé que sur Opera et
Chrome, de toutes façons mes pages ne marchent pas sur Safari et Firefox
car j'utilise un truc incompatible.
Avatar
SAM
Le 26/09/15 10:42, Une Bévue a écrit :

je viens d'essayer ça :
@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe {
height: 28cm;
width: 20cm;
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
border: 1px red solid;
background: yellow
}
}



n'est-ce pas le div "page_page" qui doit être repositionné ?

@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
#page_page { position:absolute; top: 0; } }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}

sinon ... et le media page ???
(mais ... ça ne vaut que s'il n'y a qu'une page à imprimer)

@media print {
@page { margin-top: -7cm; }
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}

ou essayer ;

@media print {
@page :first { margin-top: -7cm; }
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}


Sinon ... coller un "page-break-before" à ce 'page_page' ?
<http://www.yoyodesign.org/doc/w3c/css2/page.html#propdef-page-break-before&gt;

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 28/09/2015 09:54, SAM a écrit :
n'est-ce pas le div "page_page" qui doit être repositionné ?



si, bien sûr, mais sans doute aussi ce qui est à l'intérieur...

@media print {
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
#page_page { position:absolute; top: 0; } }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}

sinon ... et le media page ???
(mais ... ça ne vaut que s'il n'y a qu'une page à imprimer)



AH, ça je ne savais pas, j'ai fait quelques tests, ça me semble
inopérant, trop récent ?


@media print {
@page { margin-top: -7cm; }
body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}

ou essayer ;

@media print {
@page :first { margin-top: -7cm; }



le @page:first, je n'ai pas encore essayé...

body * { font-family: arial; display: none; }
#page_page, .iframe, iframe { display: block }
iframe { height: 28cm; width: 20cm; margin: auto; border: 1px red
solid; background: yellow }
}


Sinon ... coller un "page-break-before" à ce 'page_page' ?


ça donne rien, mais bon, il faut aussi que le reste colle en haut de la
page.
pour tester avec le @media print, je vais créer une page spécifique de
test, qui représentera uniquement le @media print et je vais essayer de
faire coller l'iframe en haut de la page.


merci bien.
<http://www.yoyodesign.org/doc/w3c/css2/page.html#propdef-page-break-before&gt;


1 2