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

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

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

  • 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, распечатанный Chrome

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

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


pdf html css background page-break
person Underthesun    schedule 16.05.2018    source источник
comment
Почему бы вам не использовать стиль фонового изображения на <div class="page"> вместо тела?   -  person Mohamed Ramrami    schedule 16.05.2018
comment
@MohamedRamrami Я проверил ваше предложение и переместил стиль тела на div.page, после чего получил PDF без фона водяного знака.   -  person Underthesun    schedule 16.05.2018

Ответы (1)


arrow_upward
1
arrow_downward

Наконец, я использовал div, чтобы обернуть все содержимое body, и нарисовал фоновое изображение водяного знака на этом 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: введите здесь описание изображения

person Underthesun    schedule 17.05.2018