Apprenez à créer une page d'impression avec CSS

Utilisez CSS pour créer une page d'impression. Vous n'avez pas besoin de créer un fichier HTML spécifiquement pour l'impression, ce qui peut économiser de l'énergie. Le principe est d'utiliser CSS+p pour mettre en page la page HTML selon la « norme WEB ».

Tout d’abord, ajoutez le fichier CSS défini pour l’imprimante à la page HTML

<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" />	
<link href="css/admin-print.css" rel="stylesheet" type="text/css" media="print" />

media="screen" est orienté écran ;

media="print" est pour l'impression ;

Deuxièmement, créez une version imprimée de la page et supprimez les éléments inutiles de la page, tels que la navigation, les barres latérales, les publicités, les droits d'auteur, etc. A cette époque, l'avantage de créer des pages selon les « standards WEB » peut être reflété. Il est facile de changer la mise en page avec CSS.

/* 隐藏不打印项 start */
h1 span {    /* 副标题 */
 display: none;  
}
#sidebar {   /* 侧栏 */
 display: none;
}		
#content td.ads {  /* 表格内广告 */
 display: none;
}		
#content th.col2 span {  /* 锚链接 */
 display: none;
}		
#content #bottom-2 {  /* 页尾表格打印 */
 display: none;
}		
/* 隐藏不打印项 end */

Troisièmement, la fonction du bouton d'impression peut imprimer normalement dans IE et Firefox.

<input type=button value="打 印 本 页" onclick="window.print()">

De plus, il existe une version locale de la page d'impression qui permet les « paramètres d'impression » et l'« aperçu avant impression ». Cependant, en raison de ce paramètre, l'impression réseau doit appeler un contrôle dans le navigateur IE et la sécurité d'ActiveX. le contrôle doit être réduit et il ne peut être utilisé que dans IE. Il n'est pas pratique de l'exécuter. Je publie donc uniquement le code d'appel à titre de sauvegarde.

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> </OBJECT>
<input type=button value="打印预览" onclick=document.all.WebBrowser.ExecWB(7,1)>
<input type=button value="页面设置" onclick=document.all.WebBrowser.ExecWB(8,1)>
<input type=button value="打印本页" onclick=document.all.WebBrowser.ExecWB(6,1)>

Quatrièmement, choses à noter

Dans les styles d'impression, la taille de la police d'impression est mesurée en points (pt). Pour l'affichage de la taille de police à l'écran, les pixels (px) sont plus appropriés que les points et les pieds.

Dans les styles d'impression, l'attribut float de CSS peut parfois causer des problèmes et entraîner l'absence de la page imprimée, alors essayez de supprimer l'affichage inutile au niveau des blocs.

Concernant les paramètres d'impression et la personnalisation des en-têtes et des pieds de page, j'ai vérifié certaines informations et constaté que CSS et HTML ne peuvent pas être contrôlés et ne peuvent être obtenus qu'en appelant des contrôles ActiveX, mais ce n'est pas sûr. La meilleure façon est de cliquer sur le menu du navigateur pour définir vous-même les paramètres d'impression avant d'imprimer.

Il existe également une balise en CSS qui permet de définir des sauts de page : "page-break-after" et "page-break-before". Parce que ma page de vacances contient beaucoup de tableaux, je n'ai pas appliqué ce CSS. Vous pouvez expérimenter vous-même les effets spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!