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