How To Convert JSON Data Into Excel In Angular

Introduction

There are lots of online tools to convert JSON data into Excel. However, if you would like to develop a custom solution for your company here is a simple way to do so with Angular4.

Implementation

The Excel conversion of JSON data can be done in Angular 4 by using the below NPM packages

• alasql (https://www.npmjs.com/package/alasql)
• xlsx (https://www.npmjs.com/package/xlsx)

The npm package xlsx plays the supportive role for alasql. If we didn’t include the xlsx package you might see the error “Please include the xlsx.js library” error in your browser console window like below,

Figure: 1

By using alasql you could even create an Excel document with multiple sheets in Angular 4 by passing multiple JSON objects

Step 1

Go to your package.json file and add the packages alasql and xlsx like below

Code Snippet: 1

Now we have to install the newly added npm packages into our project, to do so you can use any of the below steps

1. If you are using Visual Studio, right-click the JSON file and click on “Restore Packages” option. This will automatically install the missed npm packages.

2. If you are using any terminal window, just install the above packages by using the below command.
   
   1. npm install alasql
   2. npm install xlsx
   Code Snippet: 2

Step 2

Now, we have to include some reference scripts directly to your index file where you have referred the polyfills required for Angular.

Code Snippet: 3

Step 3

Next step is to include to import the package alasql just like importing all other packages in your app.module.ts file like below,