Как повторить рисунок водяного знака на каждой странице PDF-файла, который преобразован из HTML-документа, который включает в себя несколько разрыва страниц до / после? - PullRequest
Новая
       20

Как повторить рисунок водяного знака на каждой странице PDF-файла, который преобразован из HTML-документа, который включает в себя несколько разрыва страниц до / после?

0 голосов
/ 16 мая 2018

В последнее время я создаю большой PDF-файл из HTML / CSS, который включает в себя десятилетия страниц. На каждой странице должна быть картинка с изображением Wartermark в качестве фона: watermark picture

Мои коды следующие:

  • HTML 

<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Paginated HTML</title>
  <style type="text/css" media="all">
    body {
      background: #fff repeat url("watermark.png");
      background-size: 100%;
    }
    
    div.page {
      page-break-after: always;
      page-break-inside: avoid;
    }
  </style>
</head>

<body>
  <div class="page">
    <h1>This is Page 1</h1>
  </div>
  <div class="page">
    <h1>This is Page 2</h1>
  </div>
  <div class="page">
    <h1>This is Page 3</h1>
  </div>
</body>

</html>

Когда я использую Chrome (66.0.3359.139) для печати html в pdf, я получаю pdf с первой страницей, включающей изображение водяного знака на заднем плане: pdf printed by Chrome

Когда я использую FireFox (60) для печати HTML в PDF, я получаю PDF без страницы, включая изображение водяного знака: pdf printed by Firefox

Кто-нибудь знает, как расширить изображение водяного знака в качестве фона для каждой страницы pdf, созданной из html / css? Любая помощь будет оценена!

1 Ответ

0 голосов
/ 17 мая 2018

Наконец, я использовал div, чтобы обернуть все содержимое тела, и нарисовал фоновый рисунок водяного знака на этом div. Казалось, работает с небольшим дефектом, что изображение водяного знака не распространяется до нижней части последней страницы (красный кружок в результате изображение PDF). Любая помощь для устранения этого дефекта будет оценена! Дополнительные коды следующие:

-CSS: 

.watermark
  {
    background: #fff url("watermark.png");
        background-size: 100%;
  }

-HTML: 

<div class="watermark">
  <div class="page">
    <h1>This is Page 1</h1>
  </div>
  <div class="page">
    <h1>This is Page 2</h1>
  </div>
  <div class="page">
    <h1>This is Page 3</h1>
  </div>
</div>

И результат pdf: enter image description here

...