WEBVTT 00:00.000 --> 00:05.760 Hello friends, in this tutorial I will be showing you that how to convert CSV files 00:05.760 --> 00:18.400 into HTML and PDF documents inside browser using Node.js and Express. And for this we will be using this dependency or module Node.js module which lets you do 00:18.400 --> 00:26.400 this CSV converter to HTML and PDF. So many a times you need to convert your CSV file which is kind of a table file in order 00:26.400 --> 00:33.760 to convert it to HTML and PDF. So basically I will be showing you how to do this 00:33.760 --> 00:40.320 So first of all guys I will show you the demo. So you will see this is the file here 00:40.320 --> 00:47.680 Let me show you this is where our file users for CSV 00:47.680 --> 00:56.120 You will see name.h. Let me add another column, third column country and then username and let me add the date 00:56.120 --> 01:07.800 24, Australia. So now you have three columns and two rows. So now if I want to convert this I will simply write Node.js 01:07.800 --> 01:12.840 So you will see HTML created with success and compiling the template with handlebars 01:12.840 --> 01:20.440 So now you will see two files are created. First is the HTML file which contains, it's a HTML table it has converted it to 01:20.440 --> 01:26.080 So first of all it converts the CSV file to the HTML table and now after that it converts 01:27.039 --> 01:35.039 to the PDF document. So it's very easy guys. First of all it converts to HTML table and then it converts HTML to PDF 01:35.039 --> 01:42.039 So this is the PDF here you will see name.h. Country. So you can add as many columns as you want inside your CSV file 01:42.039 --> 01:49.039 So this is very easy guys. You can do this inside Node.js and simple JavaScript 01:49.039 --> 01:58.000 So let me just show you this demo from scratch. So all the source code regarding this application will be there inside video description 01:58.000 --> 02:02.000 I have written a complete blog post on my website. This is the blog post 02:02.000 --> 02:07.000 Step by step instructions is given. So let me start this application 02:07.000 --> 02:15.000 Let me go to the project folder and make a new directory here which is CSV to HTML PDF 02:15.960 --> 02:24.960 I will go into this directory and I will open this inside my Visual Studio Code text editor 02:24.960 --> 02:30.960 So we can make npm init dash 5. So this will create m3 package for JSON file 02:30.960 --> 02:36.960 After that we can install our dependency which is CSV to HTML and PDF 02:36.960 --> 02:41.960 So I think this is the dependency. So if you just see. Oh sorry this is not 02:42.920 --> 02:51.920 npm i CSV dash converter to HTML PDF. So this is actual dependency 02:51.920 --> 03:02.920 Sorry this is not. Again I have made a mistake. And this is quite a long name for a library 03:02.920 --> 03:08.920 So now let me not just copy this command here and paste it 03:12.920 --> 03:23.920 This is actual PDF is coming first here. That is why it was not 03:23.920 --> 03:29.920 So it is just installing it. So just wait guys. It takes some time to install 03:29.920 --> 03:35.920 Depending upon your computer speed it will take time. So just wait 03:36.880 --> 03:50.880 So now it has successfully installed it guys 03:50.880 --> 03:59.880 So now we can create index.js file. So it has given a complete example here 03:59.880 --> 04:08.840 So basically we can copy this example. Paste it. So first of all it is importing the library you will see inside the first line 04:08.840 --> 04:13.840 Then we are importing the path library of nodes here which is a built-in dependency 04:13.840 --> 04:22.840 And we are invoking this dependency by using a new converter. And here we need to in the root directory we need to create user.csv file 04:22.840 --> 04:38.840 And then we can just have the entries here. So now we have the CSV file 04:38.840 --> 04:46.840 So now we can run this. So simply we can say node index.js 04:46.840 --> 04:50.840 So it will create the HTML file here guys first of all 04:50.840 --> 04:54.840 And then it will create the PDF file. So this is our table 04:54.840 --> 05:04.799 And after that it has also created our PDF file. If you see this is our PDF 05:04.799 --> 05:09.799 We can open this inside Google Chrome. So you can see that 05:09.799 --> 05:18.799 So in this easy way guys you can do this. So I think we can do convert this application to express application 05:18.799 --> 05:23.799 So it will take hardly a second. So we can require express 05:23.799 --> 05:31.760 We can make a new app. We can listen on port number 5000 05:31.760 --> 05:47.760 And we can say app is listening on. So for now we can uncomment this code here 05:47.760 --> 05:53.760 So just comment this code. So we can make a route here 05:54.719 --> 05:59.719 So when we get request when we load the page for the very first time we can say request response 05:59.719 --> 06:05.719 So response.send file we can say we can load a file here which is 06:07.719 --> 06:15.719 So we can create this file in the root directory index.html. So this will contain a simple form here guys 06:15.719 --> 06:24.680 So method will be simply post. As we are submitting data. So we can simply convert 06:24.680 --> 06:30.680 And inside this guys we will have our. We will be expecting a file 06:30.680 --> 06:39.680 Input type file. And the name will be csv. That's it. So after that guys we will have a simple button 06:39.680 --> 06:49.680 To convert to PDF. Convert to. HTML. Or convert to PDF. Because we are just making one conversion 06:49.680 --> 06:59.640 At once. So let me just show. So after that guys what we can do 06:59.640 --> 07:05.640 We can make. First of all we need to install express. So npm i express 07:11.640 --> 07:16.640 And we can also install malter dependency in order to upload files inside of a server 07:16.640 --> 07:24.599 So right here you can just make upload public slash. Inside public you will have upload 07:24.599 --> 07:32.599 So where you will store all the csv files which you upload. So now we can start this application 07:32.599 --> 07:40.599 So app is listening on port 5000. So now we can import our malter dependency 07:40.599 --> 07:47.599 So we can require this. So after that guys we also need to 07:49.599 --> 07:56.560 Require our. After that we need to make this directory which is public slash upload static directory 07:56.560 --> 08:03.560 For this we can say app.use express. That static. And then we can pass the path 08:03.560 --> 08:11.560 Public slash upload. That's it. And then we can make this post request guys 08:11.560 --> 08:21.520 App.post slash convert. Request response. And here first of all guys we need to upload the csv file which is coming 08:21.520 --> 08:25.520 So for this. We need to make some kind of middleware function 08:26.520 --> 08:31.520 So first of all we need to configure malter. So just write here malter 08:31.520 --> 08:38.520 Include extension. And the very first result which comes in. This takes this 08:38.520 --> 08:45.520 Stack overflow. And. You will get all this. So simply you need to paste this code here 08:46.480 --> 08:50.480 After app. So all the source code will be there inside video description 08:50.480 --> 08:54.480 So don't worry. I have given the source code in the video description 08:54.480 --> 09:00.480 Public uploads. Because we are saving it inside this directory. So we are changing the address here 09:03.480 --> 09:08.480 After that we are initializing it to upload. And for now we are only expecting a single file 09:09.480 --> 09:15.480 So we can. Provide the name attribute which we have given it is csv. That's it 09:16.440 --> 09:24.440 So now we can upload this file. So upload. Request response. And if any sort of error takes place 09:24.440 --> 09:32.440 We can say. If error takes place. Then we can say console.log error 09:32.440 --> 09:38.440 If no error takes place. Then we can. Print the path of the file which is uploaded 09:38.440 --> 09:45.440 By request.file.path. So now we can launch this application guys. So if I try to upload a csv file here 09:46.400 --> 09:52.400 If I go to localhost 5000. So if I try to upload it 09:54.400 --> 10:04.400 If I. I can download a csv file from the internet. Download csv file 10:16.400 --> 10:23.400 These are very long files. So this is the file here. Simply cut 10:23.400 --> 10:35.400 And inside download. So I can paste this file. Let me download a simple csv file 10:40.400 --> 10:47.360 Click download. So now we can upload this file. Go to download folder 10:47.360 --> 10:51.360 Simply upload convert to pdf. And it is saying cannot read property 10:51.360 --> 11:05.360 Or path. Request.file.path. So it hasn't uploaded it 11:05.360 --> 11:13.360 Let me see why it hasn't. I think we need to move this line 11:14.320 --> 11:20.320 A little bit upward here. Like this. Just move it above this 11:20.320 --> 11:47.280 And once again do this. And let me see guys. I think this error is coming because we haven't provided the encoding type here 11:49.280 --> 11:54.240 Whenever we upload files we need to provide this multipath form data. So just add this attribute 11:54.240 --> 11:58.240 I think this will solve the problem. So node and export cs 12:00.240 --> 12:10.240 Sorry let me. Node now. So whenever you upload files. You need to 12:10.240 --> 12:16.240 Provide that encoding type. So if I try to. And now you will see 12:16.240 --> 12:20.240 Path is uploaded here. File is uploaded and printing the path here 12:21.200 --> 12:25.200 So this is our file here. So now we need to convert this to a pdf document 12:25.200 --> 12:31.200 It is very easy. So now we have got the file. So now we can use the library here 12:31.200 --> 12:41.200 Simply I will. Make a. Separate function here which is. Or I can simply 12:41.200 --> 12:47.200 Copy paste this code. I will move this code inside. Our post request 12:47.200 --> 12:58.160 In this else block. And. Instead of this. We will pass our file. Request.file.path 12:58.160 --> 13:08.160 And after that guys. You need to. html and pdfs. So 13:08.160 --> 13:16.160 Here you need to give the output file name. So the output file name will be simple. Output. Date.now 13:16.160 --> 13:25.120 And then output. Dot. CSV. I think we don't need to give 13:25.120 --> 13:31.120 Extension here. Simply give output. So here we just need to pass here 13:31.120 --> 13:41.120 Dot slash. Output. That's it. So now guys. We can start this application 13:41.120 --> 13:45.120 If I try to upload this CSV file. Hopefully it should create 13:45.120 --> 13:52.080 HTML and the pdf file for us. In the root directory. So now you will see that guys 13:52.080 --> 14:00.080 It is converting. HTML created. And pdf is also created. So you will see that guys 14:00.080 --> 14:06.080 It has created this file. You will see. This is our table 14:06.080 --> 14:14.080 This is. I think. I think this is one. This is the table here 14:14.080 --> 14:20.080 You can see it has converted. The HTML table. And you can also find out 14:20.080 --> 14:28.080 If you open this. Inside the root directory. File explorer. This is our pdf 14:28.080 --> 14:32.080 So now we simply need to. Have a way by which we can download 14:32.080 --> 14:38.080 This pdf file as an attachment. So express. Allows us to do this 14:38.080 --> 14:44.080 We have a function here. Simply download this file. As an attachment 14:44.080 --> 14:50.080 So download. And here we can pass the output. And then we can 14:50.080 --> 14:56.080 Just have cfg file. That's it. And then it is a callback function 14:56.080 --> 15:02.080 When the file is successfully downloaded. That's it. And now we can 15:02.080 --> 15:12.080 Restart this application guys. So. Again let me try to upload. A cfg file. Convert 15:12.080 --> 15:40.080 So it is creating. Compiling this file here. So just wait. So you can see 15:40.080 --> 15:46.080 It has successfully created. This pdf file guys. So I think it doesn't 15:46.080 --> 15:52.080 Allow any callback function. So. You can see it has created that file 15:52.080 --> 16:02.080 But it let me say. It contains a promise. I think this is promise based 16:02.080 --> 16:12.080 So we can say. Dot then. So here we can say. Response of download 16:16.080 --> 16:26.080 Output. Dot cfg. So let me see 16:26.080 --> 16:32.080 If it is working or not. So the pdf files. And the html files are created 16:32.080 --> 16:36.080 So it is just a. Case file which you can download it 16:36.080 --> 16:44.080 Inside the browser itself. So you can also do it. By yourself also 16:44.080 --> 16:56.080 If you are able to do this. So you can do this on yourself guys 16:56.080 --> 17:00.080 So I will be providing all the source code. In the video description 17:00.080 --> 17:04.079 So you can see all the pdf files. And html files are being created 17:04.079 --> 17:08.079 So if you like this video. Then please hit the like button 17:08.079 --> 17:12.079 Subscribe the channel. And I will be seeing you next week