Question

我想用现代浏览器打印html页面，并在打印时在每个页面上添加标题。在互联网上找到的技术，但在现代浏览器中不起作用。有没有办法做到这一点？

我添加了在现代浏览器中无法工作的示例。

	$(document).ready(function(){
		var head = $('table thead tr');
		$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
	});

    table{
        border:none;
    }
    tr{
		display:block;
	}
    td, th{
        width: 100px;
    }
	tbody tr.head {
		page-break-before: always;
		page-break-inside: avoid;
	}
	@media screen {
		tbody .head{
			display: none;
		}
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<table border="1">
		<thead>
			<tr class="head">
				<th>Month</th>
				<th>Year</th>
			</tr>
		</thead>
		<tbody>
			<tr class="start">
				<td>January</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>February</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>March</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>April</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>May</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>June</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>July</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>August</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>September</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>October</td>
				<td>2010</td>
			</tr>
			<tr>
				<td>November</td>
				<td>2010</td>
			</tr>
			<tr class="end">
				<td>December</td>
				<td>2010</td>
			</tr>
		</tbody>
	</table>
</body>

Answer 1

试试这个样本

使用media query作为屏幕和打印的自定义样式

CSS

＆＃13;

@media screen {
   .page-header { display: none; }
   .page-footer { display: none; }
}

＆＃13;

HTML代码

＆＃13;

<body>
	<p class="page-header">Page header goes here</p>

	 your Webpage main content goes here

	<p class="page-footer">Page footer goes here</p>
</body>

＆＃13;

通过css在打印时将标题添加到html页面

1 个答案: