Pracuję nad stroną, która musi wyeksportować zawartość strony internetowej w formacie pdf, ale musi on spełniać następujące warunki:
- Tło musi być w pełni wydrukowany na każdej stronie
- Treść nie musi pokrywać się tło
Ponieważ strona korzysta z PHP, próbowałem użyć mPDF, który wcześniej użył na innej stronie PHP, na którym były te same warunki. mPDF pokazywał pełne tło na każdej stronie pliku pdf, nawet gdy strona nie była w pełni wypełniona treścią, i mogłem ustawić pola, które wpływały na zawartość, ale nie na tło, które wciąż pokrywał całą stronę.
Niestety, mPDF nie działa z tym nowym miejscu, najprawdopodobniej dlatego, że wykorzystuje układy bootstrap i flex (oddał mi plik pdf z około tysiącem stron, w większości pustych, inne z bardzo powiększonymi fragmentami strony), poza tym, ta część zawartości zmianie javascript przed wprowadzeniem go do użytkownika, i to nie było brane pod uwagę mPDF (zauważyłem, że to było, kiedy usunąłem bootstrap.css, co pozwoliło mi zobaczyć wynik konwersji).
Dlatego przeszedłem do lalkarza https://github.com/puppeteer/puppeteer który świetnie drukuje zawartość za pomocą chrome pod maską, ale mam pewne problemy.
Pierwszy problem polegał na tym, że nie mogłem wydrukować pełna tło na każdej stronie, ale postanowiłem ją podczas pisania tego wydania, tworząc div z position: fixed i width i height około 100% to działa w tle
Drugi problem polega na tym, że kiedy ja ustalam pola w puppeteer (które ostatecznie pokrywają się z polami do druku w chrome), ale również wpływa na tło (to było problemem jeszcze przed utworzeniem stałego div), więc nie mogę znaleźć sposób, aby tekst nie nakładała się na tło
Tutaj można zobaczyć przykład: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
Jeśli otworzysz podgląd na innej karcie i spróbujesz wydrukować go, pojawi się problem, z którym mam do czynienia