ugrás a tartalomhoz

PDF generálás JS-el

TIV · 2009. Okt. 23. (P), 14.58
Sziasztok!

Beleütköztem egy nagyon érdekes témába. A következő projectben amit csinálok, szükség lesz mindenhol "Export to PDF" gombra. Eddig szerver oldalon generáltam PDF-et (PHP), ám ez a megoldás sajnos most nem fog működni.

A gond az, hogy a lapon használok néhány helyen -kliens oldalon előállított- grafikonokat, amiket a FLOT nevű JQUERY kiegészítéssel (library) hozok létre. Ezeknél a lapoknál is kellene PDF gomb, ezért utánajártam lehet-e Javascriptből PDF-et generálni. Az a baj, hogy nem sok mindent találtam. A legkorrektebbnek a jspdf project látszik, de nekem sajnos nem működik a sample sem. Nektek? Illetve másik lényeges kérdés lenne, hogy a háttérben a JS PDF generálók hogyan hozzák létre a PDF-et? Nem forráskód alapján kellene ugyanis, hisz a Flottal kirajzolt grafikon DOMban van manipulálva. Mi lehet képes tényleg abból PDF-et csinálni, mint ami a képernyőn van?

Elég nehéz téma, remélem azért van valami megoldás. Ha semmi, akkor még mindig ott a pdf-be nyomtatás dolog böngészőből, csak hát valakinek majd meg kell magyarázni az ügyfélnek, hogy itt miért nem működik az export to pdf gomb. jajajj!

Köszönöm előre is!
 
1

Lehetőségek

vbence · 2009. Okt. 23. (P), 15.43
... amiket a FLOT nevű JQUERY kiegészítéssel (library) hozok létre

A kérdés az, hogy a kiterjesztés vissza tudja-e adni bitmapként az eredményét... ha igen, felküldheted (POST) a szerverre, és ott előállíthatod a megszokott módon a PDF-et. Ha nem készít bitmapet akkor mindegy hogy mit geneálsz kliensoldalon, úgy sem tudod belekombinálni a DHTML alapú grafikont.

Másik lehetőség, hogy feltöltöd az adatokat és egy szerveroldali cuccal is legenrálod a grafikonokat, amik persze máshogy fognak kinézni, de ez nem is baj, ha arra gondolsz, hogy nyomtatóbarát formátumot generálsz.
2

Canvas

Poetro · 2009. Okt. 23. (P), 17.10
Amennyiben canvas-t használ a FLOT (tehat IEn kivül mindenhol), akkor lekérdezhető getImageData-val a canvas összes pixelének adata.
var imageData = context.getImageData(0,0,width,height);
var data = imageData.data;
Ekkor a data tömbben elérhető lesz a teljes bitmap adat amiből a szerver oldalon újragenerálhatod a képet (a kép 32 bites, azaz tartalmaz alpha csatornát is).
Már csak el kell küldened a szerverre mondjuk valamilyen formában, mondjuk byteonként base64 kódolod, és csinálsz belőle egy jó nagy stringet. Azért készülj fel, hogy eléggé nagy mennyiségű adatról van szó, ugyanis egy 100x100 pixeles canvas 100x100x4 byte kb 39 kbyte, amit ha base64 kódolsz, akkor 1.37-szorosa lesz az eredetinek, ami ebben az esetben kb 54 kbyte.
Nem tudom, hogy a FLOT használ-e canvas emulációt, vagy hogy a canvas emulációk amik működnek IE alatt tartalmazzák-e a getImageData-t, amit én találtam, az nem, és ahogy a VML dokumentációját néztem, bitmap leképzést nem is tartalmaz.

Másik dolog, ami még működhet, hogy használsz egy PHP oldali diagram rajzolót, és az általa generált képet rakod be a PDFbe. Mondjuk érdemes megnézni az eZ Components Graph csomagját, ami tud SVG-be (vektoros), és bitmap képbe is renderelni (amit mondjuk PNGbe vagy JPEGbe mentesz).
3

jspdf

solkprog · 2009. Okt. 23. (P), 19.19
Nálam (ubuntu, firefox 3) teljesen korrektek a demók.