Я работаю над веб-сайтом, который должен экспортировать содержимое веб-страницы в формате pdf, но он должен соблюдать следующие условия:
- Фон должен быть полностью напечатан на каждой странице
- Содержимое не должно перекрывать фон
Поскольку веб-сайт использует PHP, я попытался использовать mPDF, который я ранее использовал на другом веб-сайте PHP, на котором были те же условия. mPDF показывал полный фон на каждой странице pdf-файла, даже когда страница не была полностью заполнена содержимым, и я мог установить поля, которые влияли на содержимое, но не на фон, который все еще покрывал всю страницу.
К сожалению, mPDF не работает с этим новым сайтом, скорее всего, потому, что он использует макеты bootstrap и flex (он вернул мне pdf-файл с примерно тысячей страниц, в основном пустых, другие с очень увеличенными фрагментами страницы), кроме того, эта часть содержимого изменена javascript перед представлением его пользователю, и это не было учтено mPDF (я заметил, что это было, когда я удалил bootstrap.css, что позволило мне увидеть результат преобразования).
Поэтому я переключился на кукольника https://github.com/puppeteer/puppeteer который отлично печатает содержимое с помощью chrome под капотом, но у меня возникли некоторые проблемы.
Первая проблема заключалась в том, что я не мог напечатать полный фон на каждой странице, но я решил ее во время написания этого вопроса, создав div с position: fixed и width и height около 100% это работает в качестве фона
Вторая проблема заключается в том, что, когда я устанавливаю поля в puppeteer (которые в конечном итоге совпадают с полями для печати в chrome), они также влияют на фон (это было проблемой еще до создания фиксированного div), поэтому я не могу найти способ, чтобы текст не перекрывал фон
Здесь вы можете увидеть пример: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
Если вы откроете предварительный просмотр на другой вкладке и попытаетесь распечатать его, вы увидите проблему, с которой я столкнулся