Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories

How to Convert JSON data into Excel (Code Walkthrough)

here 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.

The Excel conversion of JSON data can be accomplished in Angular 4 by using the NPM packages "alasql" and “xlsx”. Here xlsx plays the supportive role for alasql. Suppose, if you didn’t include the xlsx package you could see the error “Please include the xlsx.js library” in your browser console window.

By using alasql you could even create Excel document with multiple sheets in angular 4 by passing multiple json objects. Okay, without further ado, let’s go straight into the code.

Step 1: Go to your package.json and add the packages alasql and xlsx as shown below

alasql code.png

  • If you are using Visual Studio, right click the package.json file and click on “Restore Packages”
  • If you are using any terminal window, just install the above packages using the below code

npm install alasql

npm install xlsx

Step 2: Add the below scripts from node_modules package folder to your polyfills.

sqlcode.png

  • You will get the below error message if you didn’t include the xlsx angular package, since alasql requires xlsx support as I mentioned already.

sql code.png

Step 3: Go to your app.module file and import the package alasql just like importing any other packages,

code-sql.png

If you have followed the steps as outlined, you’re set all right. Now you have everything ready to convert the Json data into Excel data. You can query the JSON object just like querying SQL tables. Please find a sample below.

Here I have created two Json array objects and created an Excel file with two sheets in it. Each sheet holds each Json object accordingly. Also, we can pass different options to format the excel sheet like below.

sql-code.png

Hope you find this blog useful in one way or other. Please refer https://www.npmjs.com/package/alasql npm package for more information. I will be keeping you updated with more features you could do with Anuglar 4. And as always, if you’re stuck up in the middle I am available in the comments to help you out.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

When deliverables are under the gun, Jayakumar doesn't mind burning the candle at both ends to get the job done. He takes ownership of his tasks, delivers on time and inspires the rest of the team. He loves doing what he does and no wonder he volunteers to code on his laptop even on weekends. He is a Microsoft Certified Professional (MCP) and also actively contributes writing Technical articles to our blog.