本文介绍了在每个打印页面上都重复水印？ Javascript或CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我有此发票页面。我在页面后面添加了水印。我需要为要打印的每一页重复水印。
So, I have this Invoice page. and i am adding a watermark behind the page. i need to repeat the watermark for each page that would be printed.
问题是，我不知道会有多少页。可以有任意数量的页面。
The problem is that, I don't know how many pages would there be. there could be any number of pages.
我需要在每个页面后面显示水印。
I need to show watermark behind every page.
这些图像是从Google Chrome的打印模式中拍摄的。
These images are taken from Google Chrome's print mode.
这是页面的html。你不需要经历它。这里唯一的一点是，我知道有一个div发生了两次。我在javascript中使用了该代码来重复水印。
This is the page's html. you needn't go through it. the only point here is that there is a div that i know occurs two times. I used that in javascript to repeat the watermark.
<div class="content-box pad25A" style="page-break-after: always;">
<div class="row" style="min-height:1000px">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />
</div>
</div>
<div class="col-xs-5">
<center>
<div class="row">
<div class="col-xs-12">
<div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
</div>
<div class="col-xs-12">
<center>
<div style="font-size:14px;font-weight:bold;">[email protected]</div>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
</div>
</div>
</center>
</div>
<div class="col-xs-4 float-right text-right">
<h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
<div class="divider"></div>
<div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Client information:</h2>
<ul class="reset-ul">
<li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
<li><b>Address:</b><span> Peshawar</span></li>
<li><b>Phone:</b><span> 03319090057</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Info:</h2>
<ul class="reset-ul">
<li><b>Date:</b><span> 20 April 2018</span></li>
<li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Details:</h2>
<p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
</div>
</div>
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th class="text-center">Per Piece</th>
<th>Price Per Piece</th>
<th>Price Per Carton</th>
<th>Carton Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick for Mosquito</td>
<td class="text-center">48</td>
<td>Rs : 100</td>
<td>Rs : 4800</td>
<td>125</td>
<td>Rs : <span class="RowTotal">600000</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>20</td>
<td>Rs : <span class="RowTotal">86400</span></td>
</tr>
<tr>
<td>2</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>28</td>
<td>Rs : <span class="RowTotal">120960</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
</tbody>
</table>
<center>
<div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
</center>
</div>
<br />
<div class="row Signature">
<div class="col-xs-5">
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Per Piece</th>
<th>Carton</th>
</tr>
</thead>
<tbody>
<tr>
<td>China Incense Stick </td>
<td>240 </td>
<td>48</td>
</tr>
<tr>
<td>China Incense Stick for Mosquito</td>
<td>48 </td>
<td>125</td>
</tr>
<tr>
<td>Crystal</td>
<td>70 </td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<span style="font-size:16px;font-weight:bold">
NET TOTAL.
<span class="TotalAmount">1154150</span>
</span>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<center>
<span style="font-size:16px;font-weight:bold">
<span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
</span>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="row Signature">
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Reciever Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>GM. Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Proprietor Signature</b>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content-box pad25A" style="page-break-after: always;">
<center>
<p style="font-size:20px;font-weight:bold">About Our Company</p>
</center>
<div id="row">
<div class="col-xs-12">
<table class="table table-responsive">
<tr>
<td><p style="font-size:16px;font-weight:bold">1</p></td>
<td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">2</p></td>
<td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment redolence</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">3</p></td>
<td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">4</p></td>
<td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
</tr>
</table>
</div>
</div>
</div>
最后一页是硬编码的，因此我在后面添加了水印，方法是使用javascript并通过它重复内容。
The last page is hardcoded so i have added a watermark behind it by using javascript and repeating content through it.
这是我现在重复老虎香水印的方式
This is how i am repeating the "Tiger incense" watermark for now
$(function () {
$(".content-box").each(function () {
$(this).after('<div class="watermark">TIGER INSENCE</div>');
});
});
这是水印的CSS
.watermark {
position: fixed;
opacity: 0.2;
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
font-size: 130px;
margin-top: -700px;
margin-left: -50px;
white-space: nowrap;
}
我想要的是为每个页面重复水印。
What i want is to repeat the watermark for each page there would be. using javascript or css or any javascript library that would help.Also Page size would always be A4.
推荐答案
我会考虑使用覆盖层您每重复一次 100vh 的背景。您只能使用媒体查询在打印时激活此样式。
I would consider an overlay with a background that you repeat each 100vh. You can activate this style only on print using media query.
为简单起见，我使用了SVG，可以轻松地替换为图像。
body {
min-height: 300vh;
position: relative;
margin: 0;
}
body:before {
content: "";
position: absolute;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:
url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>')
0 0/100% 100vh;
}这篇关于在每个打印页面上都重复水印？ Javascript或CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！