Eksport wykresów d3.js do pliku PDF

0
196
views

Prezentowałem sposób na eksport wykresów zapisanych w formacie SVG do pliku PNG, często jednak oprócz eksportu do samego obrazka trzeba także zapewnić możliwośc pobrania pliku PDF i o tym dzisiaj będzie ten post.

Około 70% procesu eksportu do PDF załatwione już zostało przy okazji eksportu do PNG dlatego też nie będę tutaj opisywał aspektów, które zostały poruszone w poprzednim poście, więc aby rozwiać wątpliwości zachęcam się z nim zapoznać.

jsPDF

Z pomocą przychodzi biblioteka jsPDF, dzięki której można tworzyć dokumenty PDF po stronie przeglądarki internetowej. Poprzednio generowany obrazek z bazowego SVG będzie świetną podstawą bo wystarczy tylko go „przechwycić” i dodać do dokumentu PDF.

Flow

1. Pobranie elementu SVG

2. Przygotowanie obiektu canvas z rozmiarami na podstawie elementu SVG.

Polecam te rozmiary przeskalować conajmniej 4-krotnie aby zwiększyć jakość wyeksportowanego wykresu w PDF. Niestety konwertując SVG do obrazka staje się on grafiką rastrową więc aby zapewnić dobrą jakość trzeba odpowiedni powiększyć canvas (jednak nie warto przesadzić, myślę, że 8-krotne powiększenie to maksymalna wartość).

3. Dodanie białego tła do nowego elementu canvas :exclamation:

To ważny punkt, którego nie można pominąć. Domyślnie canva jest przeźroczysta, ale po eksporcie do PDF i tak jest białe tło. Aby znacząco przyspieszyć proces eksportu warto ustawić tło elementu canvas. Napotkałem taki problem, że dodawanie obrazka do dokumentu trwało kilka sekund, a przy okazji blokowało całą przeglądarkę co jest niedopuszczalne. Powodem było, że konwertowanie obrazka z przeźroczystym tłem używało nieoptymalnego algorytmu biblioteki jsPDF.

4. Przygotowanie danych obrazka w formacie base64

5. Dodanie obrazka do elementu canvas

6. Uworzenie obiektu jsPDF

Biblioteka jsPDF posiada wiele opcji, które można zobaczyć w dokumentacji. Na nasze potrzeby deklarujemy tylko orientację kartki, jednostkę i format.

7. Dodanie obrazka do dokumentu z elementu canvas

Do obliczenia wymiarów obrazka napisałem funkcję, która może pomóc zmapować rozmiar obrazka zawarty w pikselach na milimetry

W przykładzie na samym dole ta funkcja jest trochę bardziej rozbudowana bo zawiera jeszcze zabezpieczenie jeśli szerokość eksportowanego obrazka przekracza szerokość kartki.

8. jsPDF posiada wbudowaną metodę, która wyzwala pobieranie, wystarczy tylko wywołać…

Działający przykład

Nie wszystkie elementy, które znajdują się w powyższym kodzie zostały opisane ze względu na to, że dziejszy post jest rozwinięciem eksportu wykresów do obrazków, o których można było przeczytać poprzednio. Zachęcam zapoznać się z tamtym materiałem przede wszystkim jeśli potrzebujesz zapewnić wsparcie dla przeglądarek Microsoftu :smiley: