[前端]简要记录css控制打印分页

最新推荐文章于 2024-06-10 16:43:59 发布

SouthNANCoder

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量4.2k

点赞数

文章标签： css html js

本文链接：https://blog.csdn.net/Zhouzsn/article/details/113933246

版权

参考链接
page-break-before和page-break-after

在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。

在样式中有规定几个打印的样式

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。

page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

page-break-after属性会将分页符号加在指定组件后，而非之前。

实例：

<table style="width: 880px;table-layout:fixed;margin: 34px 50px 0;">
	<tr>
		<td width="80" class="table-header">单位<br/>名称</td>
		<td width="480" colspan="6" class="table-text">哔哩哔哩矿业无限公司</td>
		<td width="80" class="table-header">企业<br>类别</td>
		<td width="240" colspan="3">
			<div class="table-text">
				<input type="checkbox" disabled checked />一类
				<input style="margin-left: 10px;" type="checkbox" disabled />二类
				<input style="margin-left: 10px;" type="checkbox" disabled />三类
			</div>
			</td>
	</tr>
	<tr>
		<td class="table-header"> 经营<br>地址</td>
		<td colspan="6" class="table-text">上海浦东大道720号12楼</td>
		<td class="table-header">邮政<br>编码</td>
		<td colspan="3" class="table-text">123456</td>
	</tr>
	<tr>
		<td class="table-header">公司服<br>务电话</td>
		<td colspan="5" class="table-text">0711-1234567</td>
		<td class="table-header">传真<br>号码</td>
		<td colspan="4" class="table-text">0711-1234567</td>
	</tr>
	<tr>
		<td class="table-header">网 址</td>
		<td colspan="5" class="table-text">https://www.bilibili.com/</td>
		<td class="table-header">电子<br>邮箱</td>
		<td colspan="4" class="table-text">11111111111@qq.com</td>
	</tr>
	<tr>
		<td rowspan="3" class="table-header">企<br>业<br>负<br>责<br>人</td>
		<td colspan="5" class="table-child-header"><span class="table-header">姓名：</span>陈睿</td>
		<td rowspan="3" class="table-header">与<br>协<br>会<br>工<br>作<br>联<br>络<br>人</td>
		<td colspan="4" class="table-child-header"><span class="table-header">姓名：</span>碧诗</td>
	</tr>
	<tr>
		<td class="table-header">职务</td>
		<td>董事长</td>
		<td colspan="2" class="table-header">职称</td>
		<td>CEO</td>
		<td class="table-header">职务</td>
		<td>董事</td>
		<td class="table-header">职称</td>
		<td>站长</td>
	<tr>
		<td colspan="5" class="table-child-header"><span class="table-header">办公电话：</span>0711-1234567<br><span class="table-header">手&nbsp;&nbsp;机：</span>13433333333</td>
		<td colspan="4" class="table-child-header"><span class="table-header">办公电话：</span>0711-1234567<br><span class="table-header">手&nbsp;&nbsp;机：</span>13433333333</td>
	</tr>
	<tr>
		<td rowspan="4" class="table-header">企<br>业<br>概<br>况</td>
		<td colspan="2" class="table-header">管理干部人数</td>
		<td colspan="3">500</td>
		<td rowspan="2" class="table-header">主修<br>车型</td>
		<td colspan="4" rowspan="2">法拉利、兰博基尼、保时捷</td>
	</tr>
	<tr>
		<td colspan="2" class="table-header">职工人数</td>
		<td colspan="3">5000</td>
	<tr>
		<td colspan="2" rowspan="2" class="table-header">资产总额</td>
		<td colspan="2" class="table-header">固定资产</td>
		<td colspan="6">100000<span class="table-header">万元</span></td>
	</tr>
	<tr>
		<td colspan="2" class="table-header">流动资产</td>
		<td colspan="6">200000<span class="table-header">万元</span></td>
	</tr>
	<tr>
		<td style="height:260px;" class="table-header">企<br>业<br>简<br>介</td>
		<td colspan="10" style="text-indent: 2em;text-align: left">
			秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织，修守战之具，外连衡而斗诸侯。于是秦人拱手而取西河之外。 孝公既没，惠文、武、昭襄蒙故业，因遗策，南取汉中，西举巴、蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥饶之地，以致天下之士，合从缔交，相与为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱人，尊贤而重士，约从离衡，兼韩、魏、燕、楚、齐、赵、宋、卫、中山之众。
		</td>
	</tr>
</table>
<div class="pageSeparator"></div>
<table style="width: 880px;table-layout:fixed;">
	<tr>
		<td rowspan="2" class="table-header" style="height:300px;">入<br>会<br>申<br>请</td>
		<td colspan="10" class="table-child-header"><span class="table-header">申请加入：</span><span>普通会员<span class="table-header">（√）</span></span></td>
	</tr>
		<td colspan="10">
			<div style="text-indent: 2em;text-align: left;font-weight: bold;height: 280px;padding-top: 30px;">秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织，修守战之具，外连衡而斗诸侯。于是秦人拱手而取西河之外。</div>
			<div style="text-indent: 2em;text-align: left;">
				<span class="table-header">单位负责人签名：</span>陈睿
				<span style="position: relative;left: 300px;">
					<span class="table-header" >单位：</span>哔哩哔哩矿业无限公司
				</span>
			</div>
			<div style="position: relative;left: 208px;margin-top: 30px;">
				2021<span style="margin:0 10px;font-weight: bold;">年</span >
				01<span style="margin:0 10px;font-weight: bold;">月</span>
				28<span style="margin:0 10px;font-weight: bold;">日</span>
			</div>
		</td>
	<tr>
	</tr>
	<tr>
		<td style="height:320px" class="table-header">秘<br>书<br>处<br>初<br>审<br>意<br>见</td>
		<td colspan="10" height="320px" >
			<div style="text-indent: 2em;text-align: left;height: 280px;padding-top: 30px">同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意。</div>
			<div style="position: relative;left: 162px;">
				<span class="table-header" >秘书处：</span>张三
			</div>
			<div style="position: relative;left: 208px;margin: 30px 0 40px 0;">
				2021<span style="margin:0 10px;font-weight: bold;">年</span >
				01<span style="margin:0 10px;font-weight: bold;">月</span>
				28<span style="margin:0 10px;font-weight: bold;">日</span>
			</div>
		</td>
	</tr>
	<tr>
		<td style="height:320px" class="table-header">会<br>长<br>审<br>批<br>意<br>见</td>
		<td colspan="10" height="320px" >
			<div style="text-indent: 2em;text-align: left;height: 280px;padding-top: 30px">同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意同意。</div>
			<div style="position: relative;left: 170px;">
				<span class="table-header" >会长签字：</span>李四
			</div>
			<div style="position: relative;left: 208px;margin: 30px 0 40px 0;">
				2021<span style="margin:0 10px;font-weight: bold;">年</span >
				01<span style="margin:0 10px;font-weight: bold;">月</span>
				28<span style="margin:0 10px;font-weight: bold;">日</span>
			</div>
		</td>
	</tr>
</table>

printPage () {
            var iframe = document.getElementById('print-iframe')
            if (iframe) {
                document.body.removeChild(iframe)
            }
            var el = document.getElementById('print-preview')
            iframe = document.createElement('iframe')
            iframe.setAttribute('id', 'print-iframe')
            iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
            document.body.appendChild(iframe)
            iframe.contentDocument.body.innerHTML = `
                <style>
                    @page {margin-bottom: 0mm;margin-top: 0mm;}
                    #print-preview .pageSeparator{visibility:hidden; page-break-after:always; overflow:hidden; height:0px;}
                    #print-preview {padding: 10px 97x;text-align:center;color:#333333;font-family: "宋体";}
                    #print-preview .top-text{position: relative;left: 350px;font-size: 18px;margin: 130px 0 50px 0;}
                    #print-preview .title {font-size:35px;color:#333333;line-height:44px;font-weight: bold;margin-top:140px;}
                    #print-preview .cover-title1 {font-size:52px;font-weight: bold;margin-top:30px;}
                    #print-preview .cover-title2 {font-size:52px;font-weight: bold;margin: 80px 0 250px;}
                    #print-preview .cover-body {font-size: 32px;margin-left: 60px;padding-left: 140px;text-align: left;font-weight: bold;}
                    #print-preview .cover-body .text {margin: 0px 20px;}
                    #print-preview .cover-body .date {margin:0 30px}
                    #print-preview .cover-body .line {margin: -4px 0 60px 160px;width: 550px;background-color: #666;height: 2px;border: 0;}
                    #print-preview .cover-bottom {font-size:28px;font-weight: bold;margin:570px 0 18px 0;padding-bottom: 220px;}
                    #print-preview .page2-title {font-size: 48px;font-weight: bold;padding: 100px 0 30px 0;}
                    #print-preview .page3-title {font-size: 36px;font-weight: bold;margin-top: 550px;padding-top: 70px}
                    #print-preview .fr {float: right;}
                    #print-preview .table-header {font-size: 16px;font-weight: bold;}
                    #print-preview .table-child-header {text-align: left;padding-left: 20px;}
                    #print-preview table {width: 906px;border-bottom:1px solid #999999;border-left:1px solid #999999;text-align:center;margin: 80px 50px 50px;}
                    #print-preview table td {border-top:1px solid #999999;border-right:1px solid #999999;box-sizing: border-box;height: 50px;line-height: 50px;}
                    #print-preview .TI2 {text-indent: 2em;text-align: left;}
                    #print-preview .agreement {text-align: left;font-size: 24px;padding-left: 20px;margin:24px 0 15px 0;}
                    #print-preview .indent {text-indent: 1.5em;}
                    #print-preview .agreement-indent {margin:24px 0 15px 0;text-indent: 1.5em;}
                    #print-preview .whole-text {border-bottom: 1px solid #999999;line-height: 36px;height: 36px;margin-left:20px;text-align: left;font-size: 16px;}
                    #print-preview .whole-text span {position: relative;left: -20px;}
                    #print-preview .text-line {display: inline-block;border-bottom: 1px solid #999999;text-align: center;text-indent: 0;height: 26px;vertical-align: text-bottom;}
                    #print-preview .insert-text {line-height: 32px;}
                </style>
                <div id="print-preview">${el.innerHTML}</div>
            `
            let resumeWindow = iframe.contentWindow
            if (!window.showModalDialog) {
                setTimeout(function () {
                    resumeWindow.print()
                }, 100)
            } else {
                // 兼容IE8,不加前面这两句,只能打印出整个页面的预览效果,并不是简历原件的内容
                resumeWindow.document.body.className += ' ext-ie'
                resumeWindow.document.execCommand('print', false, null)
                setTimeout(function () {
                    resumeWindow.print()
                }, 100)
            }
        }

打印预览效果
在这里插入图片描述

SouthNANCoder

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
[前端]简要记录css控制打印分页

参考链接page-break-before和page-break-after在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。在样式中有规定几个打印的样式page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)
复制链接

扫一扫