Certaines applications du site Web doivent fournir la fonction permettant aux utilisateurs d'imprimer directement des pages. La plus évidente est que les commerçants saisissent le contenu selon le modèle fourni par le site Web, puis génèrent une page de coupon lorsque l'utilisateur imprime cette page. , c'est un coupon.
Bien entendu, le meilleur moyen est de générer un fichier image basé sur cette page. L'utilisateur télécharge l'image puis l'imprime. L'effet d'impression ne sera pas affecté par les paramètres du navigateur.
Mais si pour certaines raisons, afin d'accélérer ou de réduire les coûts, vous n'enregistrez pas la page en tant que fichier image, vous ne pouvez alors imprimer que la page HTML directement, ce qui nécessite quelques exigences supplémentaires dans la conception de la page, ici Deux des choses sont à noter :
1. Définissez les attributs de la balise de style :
<style type="text/css" media="print">
Cela signifie que les attributs de style introduits ou définis dans ce style ne sont utilisés qu'à l'impression. Pour rappel, si l'attribut média n'est pas défini, le style défini prendra effet à la fois dans le navigateur et à l'impression, il est donc recommandé d'utiliser un style. style comme celui-ci Placé après tous les styles réguliers. Par exemple, nous espérons qu'il y aura une ligne « Print and Yahoo Word of Mouth Network » sur la page imprimée, mais ce n'est pas réaliste dans le navigateur :
<p class="printTitle">Réseau de bouche à oreille Print et Yahoo</p>
Ensuite, nous pouvons définir .printTitle{display:none;} dans le style unifié, et le définir sur .printTitle{display:block;} dans le style suivant où le média est « imprimé ». Les styles d'impression définis n'ont pas une priorité plus élevée que les styles régulièrement définis lors de l'impression, il est donc à nouveau recommandé de placer les styles d'impression après tous les styles réguliers.
2. Lorsque la page est imprimée, les paramètres du navigateur auront un impact sur l'effet d'impression. Dans IE, il y a une "Imprimer la couleur et l'image d'arrière-plan" dans "Outils" - "Options Internet" - "Avancé", similaire dans Firefox. Dans "Fichier" - "Mise en page", il y a une option "Imprimer la couleur et l'image d'arrière-plan". Lorsque cette option est sélectionnée, la couleur d'arrière-plan et l'image de la page peuvent être imprimées (certains navigateurs du noyau IE non standard semblent avoir (un problème, la couleur d'arrière-plan peut être imprimée, mais l'image d'arrière-plan ne peut pas). Si elle n'est pas sélectionnée, ni la couleur d'arrière-plan ni l'image ne peuvent être imprimées. Ainsi, afin de protéger les utilisateurs des différents navigateurs et paramètres de navigateur, j'en suggère deux. points. La première consiste à utiliser la zone remplie avec la couleur d'arrière-plan comme limite et une bordure de 1 px est ajoutée. La couleur est la même que la couleur d'arrière-plan, de sorte qu'aucun changement ne soit visible dans le navigateur. même si les paramètres de l'utilisateur empêchent l'impression de la couleur d'arrière-plan, il peut toujours y avoir des bordures utilisées comme divisions et la mise en page est conservée sur le plus grand calque ; la seconde consiste à utiliser des balises <img/> pour toutes les images essentielles, afin que ces images puissent être imprimées quelle que soit la configuration du navigateur de l'utilisateur. Cela peut être la même chose que Habituellement, certaines pages sont conçues de différentes manières, mais afin d'unifier l'effet d'impression, il suffit de céder.
J'ai simplement évoqué quelques problèmes rencontrés dans les applications pratiques. Si vous avez de nouvelles questions ou idées, vous pouvez les discuter ensemble. Je les présenterai ici en premier ;
Texte original : http://ued.koubei.com/?p=918