web打印window.print()自定义分页
阅读1354评论0
前两天搞程序的时候发现，window.print打印的时候分页很不精确，不像想象中的美好，苦于完美，终于找到了一个方法，用CSS控制print的分页。
CSS的@media print就是在打印的时候生效的，用page-break-after:always定义一个分页，打印的时候就可以按照自己意愿分页了。
上DEOM：
<style>
.tit{font-size:16px;font-weight:900;}
@media print {
.noprint { display: none }
.nextpage {page-break-after:always;}
}
</style>
</head>
<body>
<div class="tit noprint">WEB打印自动分页，隐藏不需要打印的内容</div>
<p class="nextpage">这里是第一页</p>
<p class="nextpage">这里是第二页.</p>
<p class="nextpage">这里是第三页.</p>
<p>只打印内容，不打印标题和按钮</p>
<button class="noprint" onclick="window.print()">打印文本</button>
</body>总结：不需要打印的，在@media print里面定义display:none
在分页的地方加入CSS page-break-after:always就可以实现自定义分页了
有 0 位网友评论：