recherche

Maison  >  Article  >  interface Web  >  Comment utiliser JS pour implémenter l'impression de pagination

Comment utiliser JS pour implémenter l'impression de pagination

php中世界最好的语言
php中世界最好的语言original
2018-05-29 10:40:003022parcourir

Cette fois, je vais vous montrer comment utiliser JS pour implémenter l'impression de pagination. Quelles sont les précautions pour utiliser JS pour implémenter l'impression de pagination. Voici des cas pratiques, jetons un coup d'œil.

Lors de l'appel window.print(), l'effet d'impression peut être obtenu, mais lorsqu'il y a trop de contenu, l'impression de la page est requise.

Il existe plusieurs styles d'impression spécifiés dans les propriétés style

page-break-before et page-break-after qui ne modifieront pas l'affichage de la page web à l'écran. Ces deux propriétés servent à contrôler. Comment le fichier est imprimé.

Chaque attribut d'impression peut être défini sur 4 valeurs de réglage : automatique, toujours, gauche et droite. Parmi eux, Auto est la valeur par défaut. Les sauts de page doivent être définis uniquement lorsque cela est nécessaire.

Si page-break-before est défini sur toujours, l'imprimante redémarrera une nouvelle page d'impression lorsqu'elle rencontrera un composant spécifique.

Si page-break-before est défini sur gauche, les symboles de saut de page seront insérés jusqu'à ce que le composant spécifié apparaisse sur une page vierge laissée.

Si page-break-before est défini sur la droite, les symboles de saut de page seront insérés jusqu'à ce que le composant spécifié apparaisse sur une page vierge à droite.

L'attribut page-break-after ajoutera le symbole de saut de page après le composant spécifié, pas avant.

Vous pourrez voir le paramétrage de ces propriétés dans le programme suivant, 

<HTML>
　　<HEAD>
　　　　<TITLE>Listing 14-4</TITLE>
　　</HEAD>
　　<BODY>
　　　　<p>This is the first p.</p>
　　　　<p STYLE="page-break-before:always">This is the second p.</p>
　　　　<p STYLE="page-break-after:always">This is the third p.</p>
　　　　<p>This is the fourth p.</p>
　　　　<p STYLE="page-break-before:right">This is the fifth p.</p>
　　　　<p STYLE="page-break-after:right">This is the sixth p.</p>
　　　　<p>This is the last p.</p>
　　</BODY>
</HTML>
值 描述
auto 默认值。如果必要则在元素前插入分页符
always 在元素前插入分页符
avoid 避免在元素前插入分页符
left 在元素之前足够的分页符，一直到一张空白的左页为止
right 在元素之前足够的分页符，一直到一张空白的右页为止
inherit 规定应该从父元素继承 page-break-before 属性的设置

Dans l'objet Dom , l'attribut pageBreakBefore

Grammaire :

Object.style.pageBreakBefore=auto|always|avoid|left|right

<html>
　　<head>
　　　　<script type="text/javascript">
　　　　　　function setPageBreak()
　　　　　　{
　　　　　　　　document.getElementById("p2").style.pageBreakBefore="always";
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<p>This is a test paragraph.</p>
　　　　<input type="button" onclick="setPageBreak()" value="Set page-break" />
　　　　<p id="p2">This is also a test paragraph.</p>
　　</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles sur le site PHP chinois !

Lecture recommandée :

Comment gérer l'erreur d'économie d'installation sur Mac due au bison

Comment gérer correctement Taobao cnpm après l'installation de cnpm, il n'y a pas de commandes internes ou externes

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment mettre à jour nodejs vers la dernière version sous MacArticle suivant：Comment mettre à jour nodejs vers la dernière version sous Mac

Articles Liés

Voir plus