Повторение водяного знака на каждой странице печати? Javascript или css

Итак, у меня есть эта страница Invoice. и я добавляю водяной знак за страницу. мне нужно повторить водяной знак для каждой страницы, которая будет напечатана.

Проблема в том, что я не знаю, сколько страниц будет. может быть любое количество страниц.

Мне нужно показать водяной знак за каждой страницей.

Эти изображения взяты из режима печати Google Chrome.

Page1 Page2 Page3

Это страница html. вам не нужно проходить через это. единственное, что здесь, - это div, который я знаю, происходит два раза. Я использовал это в javascript для повторения водяного знака.

<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 и повторяя содержимое через него.

Вот как я повторяю водяной знак "Tiger incense" на данный момент

$(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;
 }

Я хочу повторить водяной знак для каждой страницы. используя javascript или css или любую библиотеку javascript, которая поможет. Также размер страницы всегда будет A4.

Ответ 1

Я бы рассмотрел наложение с фоном, в котором вы повторяете каждые 100vh. Вы можете активировать этот стиль только при печати с помощью мультимедийного запроса.

Я использовал 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,<svg style="transform:rotate(45deg)" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 60"><text x="0" y="25" fill="#000">Lorem </text></svg>') 0 0/100% 100vh;
}

Ответ 2

взять водяной знак в качестве фонового изображения

<style type="text/css" media="print">
    .content-box
    {
        background-image:url('watermarkimage.png');
        background-repeat:repeat-y;
        background-position: center;
        background-attachment:fixed;
        background-size:100%;
    }
</style>