Au marje de conținut, dar nu de fond pe fiecare pagină, atunci când conversia/imprimare HTML pentru a PDF

0

Problema

Am de lucru pe un site care are nevoie pentru a exporta conținutul de pe o pagină web în format pdf dar trebuie să respecte următoarele condiții:

  • Fundalul trebuie să fie pe deplin tipărite pe fiecare pagină
  • Conținutul nu trebuie să se suprapună fundal

Deoarece site-ul foloseste PHP am încercat să folosesc mPDF care am folosit anterior pe un alt PHP-ul care a avut aceleași condiții. mPDF a arătat plin de fundal pe fiecare pagină a fișierului pdf, chiar și atunci când pagina nu a fost complet umplut cu conținut și am putea stabili marjele care a afectat conținutul, dar nu de fond, care încă acoperit întreaga pagină.

Din păcate, mPDF nu este de lucru cu acest nou site-ul, foarte probabil, pentru ca foloseste bootstrap și flex machete (asta mi-a revenit un pdf cu aproximativ o mie de pagini, cea mai mare parte goale, altele cu foarte mărită în bucăți de pagina), pe partea de sus de faptul că o parte din conținut este schimbat de javascript înainte de a o prezenta utilizatorului și că nu a fost luată în considerare de către mPDF (am observat că a fost atunci când am scos bootstrap.css care mi-a permis pentru a vedea rezultatul de conversie).

Așa că am trecut la păpușar https://github.com/puppeteer/puppeteer care imprimă conținut bine folosind chrome sub capota, dar sunt unele probleme. Prima problemă a fost că nu am putut imprima plin de fundal pe fiecare pagina, dar am rezolvat-o in timp ce scriu această întrebare prin a crea un div cu position: fixed și width și height la 100% care funcționează ca fundal

A doua problemă este că atunci când am stabilit marjele în păpușar (care în final sunt aceleași ca și imprimare margini în chrome) acestea afectează fundal prea (acest lucru a fost o problemă chiar înainte de a crea fix div) deci eu nu pot găsi o modalitate de a avea textul nu se suprapun fundal

Aici puteți vedea un exemplu: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

Dacă deschideți previzualizare într-un alt tab și încercați să imprimați-l puteți vedea problema ma confrunt

google-chrome printing puppeteer
2021-11-23 10:09:26
1

Cel mai bun răspuns

0

Deci, se pare că nu e posibil să facem ceea ce am fost cerut în această întrebare, așa că am găsit o soluție alternativă.
Am tăiat partea de sus și partea de jos de fundal și le-a folosit ca imagini în interiorul păpușarului antet și subsol. A luat un timp pentru a face imaginile să coincidă cu position: fixed div care acționează ca fundal (care acum conține doar părți de fundal), dar setarea o lățime fixă pe corp și-a făcut treaba

2021-11-24 15:44:17

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................