在每个打印页上重复水印？ Javascript 或 CSS答案

【问题标题】：Repeating a watermark on every print page? Javascript or css在每个打印页上重复水印？ Javascript 或 CSS
【发布时间】：2018-04-22 20:14:08
【问题描述】：

所以，我有这个发票页面。我在页面后面添加水印。我需要为要打印的每一页重复水印。

问题是，我不知道会有多少页。可以有任意数量的页面。

我需要在每个页面后面显示水印。

这些图片取自谷歌浏览器的打印模式。

这是页面的 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;">TigerIncenseRAATradersCompany@gmail.com</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 并通过它重复内容。

这就是我现在重复“虎香”水印的方式

$(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。

【问题讨论】：

任何帮助表示赞赏:(
您是仅在打印时才需要它还是总是需要它？
也许您应该生成一个 PDF，并使用设置为每个页面添加水印。可能有一个图书馆可以做到这一点。我不能再帮你了，但我可能已经为你指明了正确的方向。
@Rahi 仅在我打印时。
@JeffreyRoosendaal 感谢您的帮助。问题是客户希望它从浏览器中保存。以pdf形式。包含水印。我在找图书馆。

标签： javascript html css

【解决方案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;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;
}

【讨论】：

改进上面的代码添加上面的 CSS 仅用于打印媒体如下@media print { … }
@hardiksolanki 我没有添加它以便能够在 sn-p 上看到结果 ;)
@TemaniAfif ，更好的代码如下所示。 '@media print { body { 最小高度：300vh;位置：相对；边距：0； } 正文：之前 { 内容：“”；位置：绝对； z指数：9999；顶部：0；底部：0；左：0；右：0；背景： url('data:image/svg+xml,') 0 0/100% 100vh; } } ' 你只需要打印媒体 CSS 中的代码。你们其余的代码是完美的。 :)
@hardiksolanki 我知道我们需要媒体打印，我已经在我的回答中说过......但是如果我添加它，我们仍然可以在 sn-p 中看到结果吗？在有人自己获取代码并尝试打印以查看它之前，您将什么也看不到......所以我添加了没有打印的代码以便能够看到它的外观，然后我们只需要激活它印刷品上的代码[这是微不足道的]
我在 Chrome 上对此进行了测试，但图像未显示，但如果您单击更多设置，然后使用选项单击背景选项框，则会出现图像。为避免必须这样做，您可以添加：-webkit-print-color-adjust:exact !important;强制 chrome 显示背景图像。

【解决方案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>

【讨论】：