Cum să creați un PDF din aplicația dvs. web

Publicat: 2022-03-10
Rezumat rapid ↬ Există o mare varietate de opțiuni atunci când vine vorba de crearea unui PDF dintr-o aplicație web. În acest articol, Rachel Andrew aruncă o privire asupra instrumentelor disponibile și împărtășește recomandările ei pentru a vă ajuta să găsiți instrumentul care funcționează cel mai bine pentru dvs.

Multe aplicații web au cerința de a oferi utilizatorului posibilitatea de a descărca ceva în format PDF. În cazul aplicațiilor (cum ar fi magazinele de comerț electronic), acele PDF-uri trebuie să fie create folosind date dinamice și să fie disponibile imediat pentru utilizator.

În acest articol, voi explora modalități prin care putem genera un PDF direct dintr-o aplicație web din mers. Nu este o listă cuprinzătoare de instrumente, dar îmi propun să demonstrez diferitele abordări. Dacă aveți un instrument preferat sau orice experiență proprie de împărtășit, vă rugăm să le adăugați la comentariile de mai jos.

Începând cu HTML și CSS

Este posibil ca aplicația noastră web să creeze deja un document HTML folosind informațiile care vor fi adăugate în PDF-ul nostru. În cazul unei facturi, utilizatorul poate vedea informațiile online, apoi face clic pentru a descărca un PDF pentru evidențele sale. Este posibil să creați bonuri de transport; încă o dată, informațiile sunt deja păstrate în sistem. Doriți să formatați asta într-un mod frumos pentru descărcare și imprimare. Prin urmare, un bun loc pentru a începe ar fi să luați în considerare dacă este posibil să folosiți acel HTML și CSS pentru a genera o versiune PDF.

CSS are o specificație care se ocupă de CSS pentru tipărire, iar acesta este modulul Paged Media. Am o prezentare generală a acestei specificații în articolul meu „Proiectare pentru imprimare cu CSS”, iar CSS este folosit de mulți editori de cărți pentru toate lucrările lor tipărite. Prin urmare, deoarece CSS în sine are specificații pentru materialele tipărite, cu siguranță ar trebui să-l putem folosi?

Cel mai simplu mod prin care un utilizator poate genera un PDF este prin intermediul browserului său. Alegând să imprimați în PDF, mai degrabă decât pe o imprimantă, va fi generat un PDF. Din păcate, acest PDF nu este de obicei satisfăcător! Pentru început, va avea anteturile și subsolurile care sunt adăugate automat atunci când imprimați ceva de pe o pagină web. De asemenea, va fi formatat în funcție de foaia de stil de imprimare - presupunând că aveți una.

Problema cu care ne confruntăm aici este suportul slab al specificației de fragmentare în browsere; aceasta poate însemna că conținutul paginilor dvs. se sparge în moduri neobișnuite. Suportul pentru fragmentare este neregulat, așa cum am descoperit când am cercetat articolul meu, „Breaking Boxes With CSS Fragmentation”. Aceasta înseamnă că este posibil să nu puteți preveni ruperea suboptimă a conținutului, anteturile fiind lăsate ca ultimul element de pe pagină și așa mai departe.

În plus, nu avem capacitatea de a controla conținutul din casetele de margine a paginii, de exemplu, adăugând un antet la alegerea noastră la fiecare pagină sau numerotare a paginii pentru a arăta câte pagini are o factură complexă. Aceste lucruri fac parte din specificațiile Paged Media, dar nu au fost implementate în niciun browser.

Articolul meu „A Guide To The State Of Print Stylesheets In 2018” este încă exact în ceea ce privește tipul de suport pe care îl au browserele pentru imprimarea direct din browser, folosind o foaie de stil de tipărire.

Mai multe după săritură! Continuați să citiți mai jos ↓

Imprimarea utilizând motoarele de randare ale browserului

Există modalități de a imprima în PDF folosind motoarele de randare ale browserului, fără a trece prin meniul de imprimare din browser și ajungând la anteturi și subsoluri ca și cum ați fi tipărit documentul. Cele mai populare opțiuni ca răspuns la tweetul meu au fost wkhtmltopdf și imprimarea folosind Chrome fără cap și Puppeteer.

wkhtmltopdf

O soluție care a fost menționată de mai multe ori pe Twitter este un instrument de linie de comandă numit wkhtmltopdf. Acest instrument preia un fișier HTML sau mai multe fișiere, împreună cu o foaie de stil și le transformă într-un PDF. Face acest lucru folosind motorul de randare WebKit.

Prin urmare, în esență, acest instrument face același lucru ca tipărirea din browser, cu toate acestea, nu veți primi anteturile și subsolurile adăugate automat. Pe această latură pozitivă, dacă aveți o foaie de stil de tipărire funcțională pentru conținutul dvs., atunci ar trebui, de asemenea, să scoată frumos în PDF folosind acest instrument și, astfel, un aspect simplu se poate imprima foarte bine.

Din păcate, totuși, veți întâmpina în continuare aceleași probleme ca atunci când imprimați direct din browser-ul web în ceea ce privește lipsa suportului pentru specificația Paged Media și proprietățile de fragmentare, deoarece încă imprimați folosind un motor de randare a browserului. Există câteva steaguri pe care le puteți trece în wkhtmltopdf pentru a adăuga înapoi unele dintre caracteristicile lipsă pe care le-ați avea în mod implicit folosind specificația Paged Media. Cu toate acestea, acest lucru necesită ceva muncă suplimentară pe lângă scrierea HTML și CSS bune.

Chrome fără cap

O altă posibilitate interesantă este aceea de a folosi Headless Chrome și Puppeteer pentru a imprima în PDF.

Cu toate acestea, încă o dată, sunteți limitat de suportul browserului pentru Paged Media și fragmentare. Există câteva opțiuni care pot fi trecute în funcția page.pdf() . Ca și în cazul wkhtmltopdf, acestea adaugă unele dintre funcționalitățile care ar fi posibile din CSS dacă ar exista suport pentru browser.

Este posibil ca una dintre aceste soluții să facă tot ce aveți nevoie, totuși, dacă descoperiți că duceți o bătălie, este probabil să atingeți limitele a ceea ce este posibil cu motoarele actuale de randare a browserului și va trebui să caute o soluție mai bună.

Polyfills JavaScript pentru media paginată

Există câteva încercări de a reproduce, în esență, specificația Paged Media în browser, utilizând JavaScript - în esență creând un Polyfill Paged Media. Acest lucru vă poate oferi suport pentru Paged Media atunci când utilizați Puppeteer. Aruncă o privire la paged.js și Vivliostyle.

Utilizarea unui agent de utilizator de imprimare

Dacă doriți să rămâneți cu o soluție HTML și CSS, atunci trebuie să căutați un agent de utilizator (UA) conceput pentru imprimarea din HTML și CSS, care are un API pentru generarea PDF-ului din fișierele dvs. Acești agenți de utilizator implementează specificația Paged Media și au un suport mult mai bun pentru proprietățile de fragmentare CSS; acest lucru vă va oferi un control mai mare asupra ieșirii. Opțiunile principale includ:

  • Prinţ
  • Casa Antenei
  • PDFReactor

O imprimare UA va formata documentele folosind CSS - la fel ca un browser web. Ca și în cazul suportului de browser pentru CSS, trebuie să verificați documentația acestor UA-uri pentru a afla ce suportă acestea. De exemplu, Prince (cu care sunt cel mai familiar) acceptă Flexbox, dar nu CSS Grid Layout în momentul scrierii. Când trimiteți paginile către instrumentul pe care îl utilizați, de obicei, aceasta ar fi cu o anumită foaie de stil pentru imprimare. Ca și în cazul unei foi de stil tipărite obișnuite, CSS-ul pe care îl utilizați pe site-ul dvs. nu va fi adecvat pentru versiunea PDF.

Crearea unei foi de stil pentru aceste instrumente este foarte asemănătoare cu crearea unei foi de stil de tipărire obișnuită, luând astfel de decizii în ceea ce privește ce să afișeze sau să ascundă, poate folosind o dimensiune sau culori diferite de font. Apoi, veți putea profita de funcțiile din specificația Paged Media, adăugând note de subsol, numere de pagină și așa mai departe.

În ceea ce privește utilizarea acestor instrumente din aplicația dvs. web, ar trebui să le instalați pe serverul dvs. (desigur, după ce ați cumpărat o licență pentru a face acest lucru). Principala problemă cu aceste instrumente este că sunt scumpe. Acestea fiind spuse, având în vedere ușurința cu care puteți produce apoi documente tipărite cu ele, s-ar putea să se plătească singuri în timpul economisit de dezvoltator.

Este posibil să utilizați Prince printr-un API, pe bază de plată pe document, printr-un serviciu numit DocRaptor. Acesta ar fi cu siguranță un loc bun pentru multe aplicații pentru a începe, ca și cum ar părea mai rentabil să găzduiți propria dvs., costul de dezvoltare al comutării ar fi minim.

O alternativă gratuită, care nu este la fel de cuprinzătoare ca instrumentele de mai sus, dar care poate obține rezultatele de care aveți nevoie, este WeasyPrint. Nu implementează pe deplin toate Media de pagină, cu toate acestea, implementează mai mult decât face un motor de browser. Categoric, unul de încercat!

Alte instrumente care pretind că acceptă conversia din HTML și CSS includ PDFCrowd, care susține cu îndrăzneală că acceptă HTML5, CSS3 și JavaScript. Nu am putut, totuși, să găsesc niciun detaliu despre exact ceea ce a fost acceptat și dacă a fost vreuna din specificațiile Paged Media. De asemenea, am primit o mențiune în răspunsurile la tweet-ul meu mPDF.

Îndepărtarea de HTML și CSS

Există o serie de alte soluții, care se îndepărtează de la utilizarea HTML și CSS și necesită să creați o ieșire specifică pentru instrument. Câțiva concurenți JavaScript sunt după cum urmează:

  • jsPDF
  • pdfmake

Recomandări

În afară de abordările bazate pe JavaScript, care ar necesita să creați o reprezentare complet diferită a conținutului dvs. pentru tipărire, frumusețea multor dintre aceste soluții este că sunt interschimbabile. Dacă soluția dvs. se bazează pe apelarea unui instrument de linie de comandă și transmiterea acestui instrument HTML, CSS și, eventual, ceva JavaScript, este destul de simplu să comutați între instrumente.

În timpul scrierii acestui articol, am descoperit și un wrapper Python care poate rula o serie de instrumente diferite. (Rețineți că trebuie să aveți deja instalate instrumentele în sine, totuși, aceasta ar putea fi o modalitate bună de a testa diferitele instrumente pe un document de probă.)

Pentru sprijinul pentru Paged Media și fragmentare, Prince, Antenna House și PDFReactor vor ajunge pe primul loc. Ca produse comerciale, vin și cu suport. Dacă aveți un buget, pagini complexe de tipărit în PDF și limitarea dvs. este timpul de dezvoltare, atunci cel mai probabil veți găsi că acestea sunt cea mai rapidă cale pentru ca crearea PDF să funcționeze bine.

Cu toate acestea, în multe cazuri, instrumentele gratuite vor funcționa bine pentru dvs. Dacă cerințele dvs. sunt foarte simple, atunci wkhtmltopdf sau o soluție de bază Chrome și Puppeteer fără cap poate face truc. Cu siguranță părea să funcționeze pentru mulți dintre oamenii care au răspuns la tweetul meu original.

Dacă te simți că te străduiești să obții rezultatul dorit, totuși, fii conștient de faptul că poate fi o limitare a tipăririi prin browser și nu ceva ce faci greșit. În cazul în care ați dori mai mult suport pentru Paged Media, dar nu sunteți în măsură să optați pentru un produs comercial, aruncați o privire la WeasyPrint.

Sper că aceasta este o prezentare utilă a instrumentelor disponibile pentru crearea de PDF-uri din aplicația dvs. web. Dacă nu altceva, demonstrează că există o mare varietate de opțiuni, dacă alegerea ta inițială nu funcționează bine.

Vă rugăm să adăugați propriile experiențe și sugestii în comentarii, acesta este unul dintre acele lucruri cu care mulți dintre noi ajungem să le confruntăm, iar experiența personală împărtășită poate fi incredibil de utilă.

Lectură suplimentară

O rezumat a diferitelor resurse și instrumente menționate în acest articol, împreună cu alte resurse utile pentru lucrul cu fișiere PDF din aplicații web.

Specificații

  • Modulul Media paginat
  • Fragmentarea

Articole și Resurse

  • Proiectare pentru imprimare cu CSS
  • Spargerea casetelor cu fragmentare CSS
  • Un ghid pentru starea foilor de stil tipărite în 2018
  • Noțiuni introductive cu Headless Chrome și Puppeteer
  • print-css.rocks

Instrumente

  • wkhtmltopdf
  • paged.js
  • Vivliostyle
  • Prinţ
  • Casa Antenei
  • PDFReactor
  • DocRaptor
  • WeasyPrint
  • PDFCrowd
  • mPDF
  • jsPDF
  • pdfmake
  • Produceți și publicați serverul