Sono i margini per i contenuti, ma non lo sfondo su ogni pagina quando la conversione/stampa HTML a PDF

0

Domanda

Sto lavorando su un sito web che ha bisogno di esportare il contenuto di una pagina web in formato pdf ma deve rispettare le seguenti condizioni:

  • Il sottofondo deve essere completamente stampate su ogni pagina
  • Il contenuto non deve sovrapporsi sullo sfondo

Dal momento che il sito utilizza PHP ho provato ad usare mPDF che ho utilizzato in precedenza su un altro sito web PHP che aveva le stesse condizioni. mPDF ha mostrato l'intero sfondo di ogni pagina del file pdf, anche quando la pagina non è stata completamente riempita di contenuti e ho potuto impostare i margini che hanno interessato il contenuto, ma non lo sfondo che ancora coperto l'intera pagina.

Purtroppo, mPDF non funziona con questo nuovo sito, molto probabilmente perché utilizza bootstrap e flex layout (che mi ha restituito un pdf con circa un migliaio di pagine, per lo più vuoto, gli altri con molto ingrandita pezzi della pagina), in cima a quella parte del contenuto è cambiato da javascript prima di presentare all'utente e che non è stata presa in considerazione da mPDF (ho notato che è stato quando ho rimosso il bootstrap.il css che mi ha permesso di vedere il risultato della conversione).

Così ho acceso il burattinaio https://github.com/puppeteer/puppeteer che stampa il contenuto proprio bene con chrome sotto il cofano, ma sto avendo alcuni problemi. Il primo problema era che non riuscivo a stampare lo sfondo completo in ogni sua pagina, ma ho risolto durante la scrittura di questa questione con la creazione di un div con position: fixed e width e height a 100% che funziona come sfondo

Il secondo problema è che quando ho impostato i margini burattinaio (che alla fine sono gli stessi margini di stampa in chrome) influenzano lo sfondo troppo (questo era un problema anche prima di creare il fisso div), quindi non posso trovare un modo per avere il testo non si sovrappongono sullo sfondo

Qui potete vedere un esempio: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

Se si apre l'anteprima in un'altra scheda e provare a stampare di essa si può vedere il problema che sto affrontando

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

Migliore risposta

0

Così, a quanto pare non è possibile fare quello che stavo chiedendo esattamente a questa domanda, così ho trovato una soluzione alternativa.
Ho tagliato la parte superiore e la parte inferiore dello sfondo e li ha utilizzati come immagini all'interno di un burattinaio, intestazione e piè di pagina. Ci sono voluti un po ' per fare le immagini coincidono con il position: fixed div che fa da sfondo (che ora contiene solo i lati dello sfondo) ma l'impostazione di una larghezza fissa sul corpo ha fatto il lavoro

2021-11-24 15:44:17

In altre lingue

Questa pagina è in altre lingue

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