1
00:00:02,360 --> 00:00:04,900
So let's create a more useful pdf now.

2
00:00:04,910 --> 00:00:10,090
Now you can configure a lot and the official docs of pdf kit are the place to go to learn more about

3
00:00:10,090 --> 00:00:10,540
that

4
00:00:10,830 --> 00:00:17,530
but let me show you how you can generate some nicely looking pdf in little time.

5
00:00:17,540 --> 00:00:24,040
For example, let's set a font size here of 26 and then add some text and

6
00:00:24,080 --> 00:00:29,530
this text will now have this font size and this will have text of invoice.

7
00:00:29,960 --> 00:00:30,870
If I now save this

8
00:00:34,150 --> 00:00:36,990
and I reload this page, we get invoice written like this,

9
00:00:38,850 --> 00:00:42,510
we can also pass an object as a second argument here and configure this,

10
00:00:42,510 --> 00:00:49,100
for example you can set underline to true here on the text and now if I reload this,

11
00:00:49,310 --> 00:00:51,330
we have the underlined text.

12
00:00:51,460 --> 00:00:55,790
So of course you can style way more, you can even add images and all that stuff.

13
00:00:56,040 --> 00:00:58,290
Now I'm happy with that title,

14
00:00:59,170 --> 00:01:04,760
I'll simply add some dashes as the next line here

15
00:01:08,180 --> 00:01:11,230
and then thereafter, I want to have my different items.

16
00:01:11,630 --> 00:01:15,790
So now I have to loop through all the items that are part of the order, in this order

17
00:01:15,800 --> 00:01:24,990
I only have one product but I might have more products and actually we can of course do that. If I go to products,

18
00:01:27,770 --> 00:01:38,200
I can add this product to the cart twice and I can quickly create a new product, prod2 and boring

19
00:01:38,200 --> 00:01:44,380
as I am I'll use the same image for 29 bucks, product 2,

20
00:01:44,620 --> 00:01:51,380
let's quickly create that product and then after we created it, I can add that to my cart as well

21
00:01:51,490 --> 00:01:58,390
and then I could order this and now I've got a brand new order. Now by the way, I should place that invoice link next

22
00:01:58,390 --> 00:02:00,070
to the order not next to the product

23
00:02:00,070 --> 00:02:03,700
now that I have a look at it but it doesn't matter, we can change this later.

24
00:02:03,850 --> 00:02:07,420
For now this will always lead to the same invoice so it does not matter too much,

25
00:02:07,420 --> 00:02:12,790
now I have multiple products in there and I should loop through them when creating the output. So I can

26
00:02:12,790 --> 00:02:16,840
add a for loop or simply access,

27
00:02:16,840 --> 00:02:21,550
keep in mind we already have access to the order here since we fetched it from the database,

28
00:02:21,550 --> 00:02:31,040
I can access order products and products is an array because we store this products in a database,

29
00:02:31,040 --> 00:02:37,370
it will be an array of objects where each object has a quantity and then a product key with more detailed

30
00:02:37,370 --> 00:02:38,960
information.

31
00:02:39,190 --> 00:02:45,070
So I can loop through my products for example with the forEach method which is a built-in method provided

32
00:02:45,070 --> 00:02:46,600
by javascript,

33
00:02:46,600 --> 00:02:55,970
I'll then get information about my product and I can now output some text where I print

34
00:02:56,160 --> 00:02:56,980
the prod,

35
00:02:57,180 --> 00:03:07,500
product is then the detail object and in that product, we have the title for example, so I can output the

36
00:03:07,500 --> 00:03:09,320
title here,

37
00:03:09,480 --> 00:03:18,920
then let's say we add a blank and a dash and a blank and then I have prod quantity right because we

38
00:03:18,920 --> 00:03:22,560
have the quantity key directly on the product itself

39
00:03:25,640 --> 00:03:32,250
and then I add let's say a times character and then we want to output the price,

40
00:03:32,300 --> 00:03:35,570
so I'll have let's say a dollar sign

41
00:03:36,690 --> 00:03:42,450
and then last but not least, I'll have the product price,

42
00:03:42,760 --> 00:03:50,470
so this field here. Now of course you could also use the next gen javascript syntax with back ticks to make this

43
00:03:50,470 --> 00:03:52,360
a bit easier to read,

44
00:03:52,600 --> 00:03:58,690
I think it's maybe easier to understand how we are concatenating this from hardcoded values and dynamic

45
00:03:58,690 --> 00:03:59,380
values

46
00:03:59,530 --> 00:04:04,420
and now we should be outputting a line of data for each product in that order.

47
00:04:04,420 --> 00:04:10,520
Now let's also add a sum at the bottom and we can calculate that on the fly here,

48
00:04:10,540 --> 00:04:17,470
let's total price start at zero and if we are looping through all the products anyways, we can use that

49
00:04:17,500 --> 00:04:26,600
to also update our total price because total price will then be the old total price plus the product

50
00:04:26,600 --> 00:04:32,690
quantity times the prod product price.

51
00:04:32,690 --> 00:04:39,590
So basically what we print here is text, we'll then also add it to our total price here, by the way this

52
00:04:39,590 --> 00:04:42,940
can be written in a shortcut with this operator,

53
00:04:42,950 --> 00:04:47,810
now this will always add the result of this calculation to the old total price

54
00:04:47,810 --> 00:04:55,090
and then here outside of the loop once we are done calculating the total price, I'll access my pdf doc,

55
00:04:55,120 --> 00:05:05,660
output some text here and that text will be total price dollar sign and then simply total price, like this.

56
00:05:05,660 --> 00:05:08,090
With all that let's save that

57
00:05:08,240 --> 00:05:12,080
and let's click on invoice for the second order

58
00:05:12,200 --> 00:05:18,670
and here I get my invoice which looks like this.

59
00:05:18,690 --> 00:05:21,030
Now of course we can also revert the font size

60
00:05:24,180 --> 00:05:32,220
here by setting font size to let's say 14, so that we don't use that super big font for all our text, so

61
00:05:32,350 --> 00:05:34,470
now by adding this line inside our loop,

62
00:05:38,300 --> 00:05:40,380
I am sure that this looks like that

63
00:05:40,400 --> 00:05:45,480
and then maybe just some stylistic thing, though it will not become super pretty.

64
00:05:45,980 --> 00:05:53,760
I can add maybe some more dashes here to separate the list from the total price and set the font

65
00:05:53,760 --> 00:06:05,280
size of that total price a bit bigger, to maybe 20. Save that, reload and here it is. Now

66
00:06:05,340 --> 00:06:11,340
obviously, this is not the most beautiful invoice we ever saw and you can learn way more about how you

67
00:06:11,340 --> 00:06:14,360
may style that in your official docs of pdf kit.

68
00:06:14,490 --> 00:06:17,370
The important thing is the data in there is correct,

69
00:06:17,400 --> 00:06:19,380
so the data does look correct,

70
00:06:19,380 --> 00:06:24,810
the total price is correct and this is how you can generate data on the fly and how you can then return

71
00:06:24,810 --> 00:06:31,500
it in a response and also save it in a file because that is important too. We do both at the same step

72
00:06:31,710 --> 00:06:35,700
and I believe its very interesting to see which power nodejs has and

73
00:06:35,750 --> 00:06:41,460
what you can do with it especially when also playing around with the features of writable and readable

74
00:06:41,460 --> 00:06:47,490
streams, like here where we are creating a pdf on the fly and we were streaming it both into a file and

75
00:06:47,490 --> 00:06:48,450
back to the client.