imprimer une partie d'une page
Le
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 ?
<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 ?
iframe { display: block; }
/* ou :
iframe { display: inline-block }
non ?
*/
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.
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
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>
<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
OK, merci beaucoup, je teste ça asap...
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 :
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
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 :
Page 2 :
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
}
}
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.
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' ?
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
si, bien sûr, mais sans doute aussi ce qui est à l'intérieur...
AH, ça je ne savais pas, j'ai fait quelques tests, ça me semble
inopérant, trop récent ?
le @page:first, je n'ai pas encore essayé...
ç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.