We all know that datasets are essential for constructing any type of AI model. This has further fueled the amount of data that businesses need to process on a daily basis.
Users may now be required to download large amounts of data in order to feed it to AI models and we normally feed the models datasets in CSV format. To do so, users must be able to obtain a CSV file with the relevant data with a single click.
Filesaver allows users to download these datasets from web applications to their systems in a single click. This can be achieved by integrating it with the company’s front-end technologies.
In this blog we’ll cover:
- What is FileSaver?
- Why is the usage of FileSaver necessary in various use cases?
- Features of FileSaver
- Required installations for the process
- Hands-on
- Conclusion
What is FileSaver?
FileSaver is an npm package that provides us with the flexibility to download files in multiple formats on a local machine from various web applications. It can be integrated with multiple technology stacks to export data into files. FileSaver is considered to be one of the best solutions for saving files on the client side because of the ease of its usage and is perfect for web applications that in turn generate files on the front end.
Why is the usage of FileSaver necessary in various use cases?
The majority of attention has been moved to data science and data analysis due to a boom in the tech industry relating to large amounts of data. Their use cases have taken over the IT market and are on a rapid hike. Every day, the size of the data fragments has increased from a few bytes to millions of trillions of bytes. For building any form of AI model we know that dataset is a major requirement and usually we feed the models with datasets in csv format. Now there can be a scenario where the users have to download huge chunks of data in csv format to feed it to the AI models. To do so the users require a flexibility to get the csv file with the required data in just one click. We have noticed how things are being automated these days and no one requires manual effort. Thus, the filesaver package when integrated with different frontend technologies can provide the flexibility to download huge chunks of data csv files with just one click.
Features of FileSaver
The features of FileSaver involves:
- Export files in multiple formats.
- Ease of use.
- Save files on the client-side.
- Fetch file from the server and download it on the client-side.
- Cross-browser compatibility.
- Multiple browsers supported.
Required installations for the process
FileSaver: FileSaver is an npm package with the flexibility to save files in multiple formats on the client-side on a local machine from any web application.
Hands-on
In this hands-on, we will begin with an online compiler for angular called StackBlitz that gives us the flexibility of an already created folder structure. We will be using this compiler to create a flexibility for users to download csv files on the client side via web app. We will first begin with exploring the files created by default and then alter the folder structure as per our need. We will then create the header keys and a sample global data that will be exported to the csv file. Performing installation for the filesaver package we will see how we can make use of the package using it in a function to export the data into a csv file. The logic for exporting the data to csv format will be stored in a service file. The service file will then be imported into the main module file and we will use the function into a child component passing the global data as parameters for importing the data into the file.
To perform the hands-on on a local machine, you can follow the steps mentioned in the below link of the original angular documentation to create a new project and then follow the hands-on steps shown below.
https://angular.io/tutorial/toh-pt0
To follow the steps we performed, you can navigate to the link below. The link below is an online compiler for angular and can be used to code logics, test out features, create simple applications, and much more.
https://stackblitz.com/edit/angular
Once you click on the above link, you will be navigated to an online compiler as shown in the image below. This is the default layout that is created for us. Stackblitz even allows us to link our projects to the GitHub repository which makes it easy for us to keep a record. The below file in the main component typescript file.
A default file is created with the name hello.component.ts which takes input for the name from the app.component.ts file as shown in the image below using the Input decorator.
We need to add an ngOnInit() lifecycle so we will extend the class to OnInit and add the lifecycle inside the class.
Navigate to the app.component.html file and delete the unwanted part of the html page.
In the left navigation pane, create a new file with the name hello.component.html.
Navigate to the hello.component.ts file and add a new variable for storing the global data. Store the data inside ngOnInt() as shown in the image below.
Now, we need to install the package file-saver to be able to save the file in csv format. To do so, in the left pane, under dependencies, type in ‘file-saver’ and hit enter.
On success, you will see the files saver package installed under the dependencies section.
Now, we need to create a new service file. To do so right click on the app section in the left navigation pane, select angular generator, and click on service.
You will then be asked to enter the name for the service file. Enter the name and hit enter.
A new service file will be created as shown in the image below.
We need to import the newly created service file in the app module file. Open the app.module.ts file.
Hit enter after the bootstrap section, and add a new key with the name providers and the value as global service as shown in the image below. Do not forget to import the global service file.
Now navigate back to the hello.component.ts file and replace template to templateURL with the value as the HTML file.
Navigate to the hello.component.html file and add a button tag as shown in the image below. Add click event to the button tag and attach a function name to it.
Now, we need headers for the downloaded csv file. Create a new variable called headers and assign the header keys.
Open the newly created service file. Import the new package that we installed above.
Create a new function called csvDownload. Add in the following code as shown in the image below. Create a new function called exportFile. This function will be called from the csvDownload function and will download the file in csv format.
Navigate to the hello.component.ts file and add a constructor with the parameter as the shared file service that contains the code for downloading the csv file.
Navigate back to the hello.component.ts file. Create a new function with the name that you attached to the button tag in the HTML file. This function will thus give a call to the function that we created in the service file to download the data in csv format.
Navigate to the hello.component.html file and add a new H1 tag as shown in the image below. The name parameter that is string interpolated has the value assigned in the app.component.ts file.
Click on the download csv button on the HTML page on the right hand side of the screen. You will notice that the csv file is now downloaded on to the local machine.
Click on the downloaded csv file and you will see the global data inside it. We can use the same method to export large datasets into csv format using angular with filesaver.
Conclusion
In this blog, we saw how it began with an online compiler for angular called StackBlitz which gives us the flexibility of an already created folder structure. We used this compiler to create flexibility for users to download csv files on the client-side via the web app. We began with exploring the files created by default and then altered the folder structure as per our need. We then created the header keys and a sample global data that was then exported to the csv file. Performing installation for the filesaver package we saw how we can make use of the package using it in a function to export the data into a csv file. The logic for exporting the data to csv format was stored in a service file. The service file was then imported into the main module file and we used the function into a child component passing the global data as parameters for importing the data into the file.
Meanwhile …
Keep Exploring -> Keep Learning -> Keep Mastering
This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.
