Как настроить водяной знак в Dompdf

Конфигурирование водяного знака с помощью Dompdf не является простой и интуитивно понятной задачей, особенно если учесть, что существует много возможностей реализации водяного знака в PDF. Игнорируя тот факт, что HTML и CSS не имеют ничего общего с форматом PDF, благодаря Dompdf, CSS-совместимому генератору PDF для PHP, вы сможете создавать PDF-файлы, используя указанные языки. Даже с этим преимуществом остается трудно понять, как добавить водяной знак. Вот почему в этой статье мы покажем вам, как настроить 2 самых основных поведения водяных знаков в вашем PDF с помощью библиотеки Dompdf.

А. Водяной знак на всю страницу (фирменный бланк)

Если вы хотите установить фоновое изображение для каждой страницы, вам нужно будет создать разметку в соответствии с определенным форматом, который позволяет добавлять верхнюю и нижнюю поля, не путаясь с макетом PDF. Во-первых, вам нужно будет установить поля для всего PDF на 0, это позволит вам установить фоновое изображение с полной шириной и высотой (те же размеры листа бумаги). Далее вам нужно обернуть все содержимое вашего PDF в основной тег, это не будет иметь никакого правила CSS. Вам также нужно, теперь, когда на странице нет полей, примените их к телу (в данном случае это наша страница PDF). И, наконец, самая важная часть урока, водяной знак для вашего PDF. Водяной знак должен быть фиксированным элементом div, фиксированные элементы в Dompdf появляются на каждой странице PDF, поэтому вам нужно только указать для этого элемента его размер и поля в соответствии с вашими потребностями. Этот div содержит внутри img, что с изображением, которое вы хотите в качестве фона, и устанавливает его высоту и ширину на 100%.

В этом примере в качестве фона у нас есть изображение jpg размером 2554x3310px, поэтому наша разметка и стили выглядят следующим образом:

Заметка

Важно установить z-index Свойство объекта водяного знака имеет отрицательное значение, чтобы оно не покрывало содержимое вашего PDF.


/**
* Set the margins of the PDF to 0
* so the background image will cover the entire page.
**/
@page {
margin: 0cm 0cm;
}
/**
* Define the real margins of the content of your PDF
* Here you will fix the margins of the header and footer
* Of your background image.
**/
body {
margin-top:    3.5cm;
margin-bottom: 1cm;
margin-left:   1cm;
margin-right:  1cm;
}
/**
* Define the width, height, margins and position of the watermark.
**/
#watermark {
position: fixed;
bottom:   0px;
left:     0px;
/** The width and height may change
according to the dimensions of your letterhead
**/
width:    21.8cm;
height:   28cm;
/** Your watermark should be behind every content**/
z-index:  -1000;
}

Hello World

Наша разметка в Dompdf будет генерировать PDF, как показано ниже:

Dompdf фоновое изображение

B. Пользовательская страница водяного знака

Если ваш водяной знак не должен покрывать всю страницу, это означает, что ваше изображение может быть нарисовано в пределах определенной области в теле страницы. Следуя той же логике водяного знака на всей странице, вам нужно создать фиксированный div с отрицательным z-индексом. Внутри div вам нужно добавить тег img с полной высотой и шириной, так как он будет иметь тот же размер, что и div водяного знака. Вы можете указать размеры водяного знака с помощью CSS, а также его положение по горизонтали и вертикали. Положение этого водяного знака полностью зависит от вас, в этом примере мы добавим логотип нашего мира кода в середине страницы, используя следующую разметку:


/**
* Define the width, height, margins and position of the watermark.
**/
#watermark {
position: fixed;
/**
Set a position in the page for your image
This should center it vertically
**/
bottom:   10cm;
left:     5.5cm;
/** Change image dimensions**/
width:    8cm;
height:   8cm;
/** Your watermark should be behind every content**/
z-index:  -1000;
}

Hello World

Генерация предыдущей разметки в Dompdf создаст PDF как:

Водяной знак Dompdf

Обратите внимание, что в обоих примерах водяной знак не будет влиять на положение, ширину или высоту вашего контента, поскольку именно в этом его суть — изображение, которое установлено на фоне и не повлияет на ваш контент. это будет видно по впечатлению.

Заметка

Вы можете добавить много водяных знаков на той же странице, как вы хотите, благодаря фиксированному правилу в CSS. Dompdf автоматически добавит одинаковые фиксированные элементы на каждую страницу сгенерированного PDF.

Ссылка на основную публикацию