Создайте изображение того же размера, что и используемая бумага (A4, буква и т. Д.). Затем установите изображение в качестве фона на @page
:
@page {
background: url(<?= __DIR__ ?>/background.png) no-repeat 0 0;
background-image-resize: 3;
}
Настройте поля в @page
, чтобы текст отображался между границами.
Примечание. В PDF.js есть ошибка, из-за которой размытое изображение отображается при использовании этого метода. Это хорошо, если смотреть в Adobe Reader, хотя. Если это проблема, вы можете установить абсолютный верхний или нижний колонтитул, и он будет делать то же самое:
<style>
@page {
header: html_Header;
}
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<htmlpageheader name="Header">
<div id="background">
<img src="<?= __DIR__ ?>/background.png" />
</div>
</htmlpageheader>