Dans le même ordre d'idées que certaines des suggestions, vous devriez au moins faire ce qui suit :
- Chargement dynamique de certains CSS par JavaScript
- Rédiger quelques règles CSS spécifiques à l'impression
- Appliquez vos règles CSS fantaisistes via JavaScript
Un exemple de CSS pourrait être aussi simple que celui-ci :
@media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
Votre JavaScript n'aura alors qu'à appliquer la classe "printable" à votre div cible et celle-ci sera la seule chose visible (pour autant qu'il n'y ait pas d'autres règles CSS conflictuelles - un exercice distinct) lorsque l'impression aura lieu.
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
Vous pouvez éventuellement supprimer la classe de la cible après l'impression, et/ou supprimer le CSS ajouté dynamiquement après l'impression.
Vous trouverez ci-dessous un exemple fonctionnel complet, la seule différence étant que le CSS d'impression n'est pas chargé dynamiquement. Si vous souhaitez qu'il soit vraiment discret, vous devrez alors charger le CSS dynamiquement comme dans cette réponse .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
@media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<h1>Print Section Example</h1>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
<p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
</body>
</html>
