Quick Start Guide | |
---|---|
Tutorial Concept |
Learn how to add an XLSX viewer to an Angular application. |
What You Will Need |
|
Controls Referenced |
As a client-side control, SpreadJS, our JavaScript spreadsheet, can be used with different frameworks, including Angular. This blog will use SpreadJS and Angular 17 to show you how to add an XLSX Viewer to your applications and allow your users to view Excel files easily.
Download the sample to follow along.
Ready to Get Started? Download SpreadJS Today!
We will learn how to:
- Install Angular
- Create a New Project
- Add SpreadJS Code
- Set Up Code-Behind
- Add Excel Import/Export Code
Install Angular
Before working with Angular, we need to make sure it is installed. To do this, we can install the Angular CLI with a command prompt:
This will install the latest Angular globally.
Create a New Project
Now, we can create a new project using the terminal as well:
In that project, we can use NPM to add the required SpreadJS libraries in the project:
We also need to add the styles to the angular.json file:
We are now ready to add code to add SpreadJS into this application.
Add SpreadJS Code
The first SpreadJS code we need to add is in the src>app>app.module.ts file:
Now that we have some background code for the App module, we can start working on the component. The first thing we can change is the src>app>app.component.html file (there is some code in here for functions that don’t exist yet, we will add them in the TypeScript file for this component):
Before adding the functions in the TypeScript file, we can add the styles to the src>app>app.component.css file:
Set Up Code-Behind
We can now set up the TypeScript file that is used in the component in src>app>app.component.ts:
This will set up the basic SpreadJS instance in an Angular app, but in our case, we still want to add Excel Import and Export capabilities to make it a true Excel viewer. We can run the app by simply using:
The Angular viewer should be displayed as below:
Add Excel Import/Export Code
Now that the SpreadJS instance is set up, we can add some of the SpreadJS IO code to that same src>app>app.component.ts file. We need to make sure to provide access to the Spread-Sheets-IO and File-Saver libraries:
Within the AppComponent class, we can initialize some more variables we will use. You can add this after the hostStyle initialization:
The next step is to add the functions that will be fired when the user changes the file for import and export and the filetype in the src>app>app.components.ts file in the AppComponent class:
Now we can add code for loading an Excel file into SpreadJS. In this case, we can handle multiple file types:
We can also save Excel files as well, and in the case of this SpreadJS instance, we are loading data initially, so we need to add the includeBindingSource option:
That is all that is needed to create an Excel viewer using SpreadJS in an Angular application!
Ready to check it out? Download SpreadJS Today!