#Angular2 – Generowanie PDF

Jest to w zasadzie przedostatni tydzień konkursu, bo zostały jeszcze 3 dni następnego, ale patrząc na obecne tempo prac, sądzę, że to już mój ostatni tydzień. Musiałem niestety zrezygnować z obsługi opon, przez co żaden z dodatkowych „ficzerów”, które zamierzałem dodać, nie zostanie dodany. Mimo to i ta jestem zadowolony z efektów, bo już prawie doprowadziłem ten projekt do końca.

Na początku planowałem ten tydzień trochę inaczej, ale prace poszły szybciej, niż się spodziewałem. Na chwilę obecną, zostało mi tylko dokończyć zlecenia i wyświetlanie, oraz edycję pojazdów. Dokończyłem już także terminarz, więc może jutro, albo za dwa dni pojawi się druga część wpisu o nim.

Udało mi się również napisać jedną z ważniejszych rzeczy, czyli generowanie faktur w formacie PDF. Jakiś czas temu chciałem już znaleźć odpowiednią bibliotekę do generowania PDF-ów. Pierwsza biblioteka, jaką znalazłem, to jsPDF. Pierwsza, jaką znalazłem, ale odrzuciłem ją od razu, ponieważ ma kiepską dokumentację i nie jest na licencji OpenSource. Kolejna, którą znalazłem, to PDFKit. Kiedy wszedłem na jej oficjalną stronę, przejrzałem dokumentację i od razu wrzuciłem ją do zakładek.

Kiedy później wziąłem się do roboty i zacząłem tworzyć najpierw statycznie plik PDF, okazało się, że nie jest z tym kolorowo. Wszystko mi się rozjeżdżało, ciężko było zlokalizować pozycję elementów i do tego PDFKit nie ma możliwości tworzenia np. tabeli. Nie dość, że musiałbym się bawić, we wstawianie jakichś kwadratów, to jeszcze musiałbym obliczać, po ilu elementach muszę dodać kolejną stronę i resetować odległość od góry. Na sam koniec okazało się, że nie obsługuje ona polskich znaków.

Myślałem, że szlag mnie trafi, bo straciłem godzinę swojego cennego czasu. Przejrzałem kilka stron na stackoverflow, w nadziei, że znajdę jakieś rozwiązanie, jeśli chodzi o kodowanie znaków. Nic nie znalazłem, ale na całe szczęście natrafiłem, na pdfmake.

Wszedłem na oficjalną stronę pdfmake i stwierdziłem, że to jest właśnie to, czego szukałem. Cały dokument jest przedstawiony w obiekcie JSON, definiuje się tam style i strukturę. Obsługuje tabele, polskie znaki, kolumny, sama dodaje strony i masę innych przydatnych rzeczy. Wystarczyło 15 minut i już wiem, jak to działa. Na stronie jest edytor, dzięki któremu można sprawdzić, czy nasza struktura jest poprawna. Dzięki temu, że jest to JSON, to mogę dodawać nowe pozycje, poprzez metodę push(). No coś pięknego, to po prostu działa.

Z samą implementacją, nie miałem większego problemu. Dodałem zależność przez npm i dodałem wpis od angular-cli.json. Stworzyłem następnie usługę pdfgenerator, w której zadeklarowałem nazwę klasy pdfMake, pobrałem potrzebne do faktury informacje i wpisałem je do obiektu JSON dokumentu. Musiałem również zamienić kwotę brutto, na tekst, czyli przedstawić ją w postaci słownej. W tym celu skorzystałem z gotowego algorytmu znalezionego w internecie, nie chciało mi się pisać czegoś, co już istnieje.

Nie będę wstawiał tutaj kodu generatora, bo zajmuje on prawie 350 linii, ale można go znaleźć na GiHub jak zawsze.

Tak prezentuje się gotowy dokument PDF:

Screenshot from 2017-05-22 22-51-48Dane w dokumencie, są przypadkowe.

Jak widać, jest to standardowo wyglądająca faktura. Jeśli w przyszłości będę rozwijał ten projekt, to może unowocześnie bardziej ten wygląd, teraz nie miałem na to czasu. I tak samo, jeśli bym go rozwijał, można dodać możliwość dodania swojego loga do faktury.

Biblioteka pdfmake ma gotowe metody, do podglądu, wyświetlenia i pobrania tego pliku, więc właśnie te funkcje zostały dodane do widoku dokumentu. Wszystku zostało już przetestowane i działa bez zarzutów.

Dzisiaj do strony uczestników DSP2017, została dodana funkcja zliczania postów. Oczywiście u mnie źle podliczyło i miałem ich na stronie 17, a w dashboardzie wordpress’a wyświetla mi się 25 postów pod tagiem DSP2017. Zaraz po tym, jak napisałem do Macieja Aniserowicza, o błędzie, zorientowałem się, dlaczego tak się stało i od razu zwiększyłem sobie limit na kanale RSS. Co dziwne mimo limitu 10 i tak wyświetlał 17.

Ten post jest 26 i prawdopodobnie pojawią się jeszcze 2 posty pod tym tagiem. Pierwszy to „Terminarz cz.2”, a kolejny, będzie już ostatnim postem na zakończenie konkursu.

To tyle na dziś.

Pozdrawiam!
MTK

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑