Interview logo

Generating Excel File in Angular 9 using “ExcelJs” with Custom Font Family | Devstringx

Angular 9 Using ExcelJS

By Devstringx TechnologiesPublished about a year ago 3 min read
1

Creating A New Angular Project

Let’s create a new Angular project using the Angular CLI tool by running/executing the following angular CLI command

ng new export-to-excel

Would you like to add Angular routing? Yes

Which stylesheet format would you like to use? SCSS

What’s ExcelJS?

ExcelJS is the Javascript library used to read, write and manipulate the excel spreadsheet data and styles to JSON and XLSX. We can create XLSX files easily with formatted headers, footers, and cells, and input any custom data including text, images, etc. It’s an active and community-driven library with many features.

Features of ExcelJS

Here are some of the awesome features of Excel JS:-

View, Add, Remove, Access Worksheets, and also set the Worksheet States like hidden, visible, and veryHidden.

Page setup of a worksheet includes orientation, margins, height, width, and print area.

Headers and Footers configuration of the worksheet with custom style, font, color, etc.

Worksheet Views to Freeze & Split sections.

Merging the group of cells or Handling individual cells.

Cell level data validation support.

Tables and Comments on worksheets.

Customized styling includes fonts, fill, border, alignment, size, gradient fills, etc.

Images in the worksheet can be added using the addImage() function.

File Input Output for Reading and writing of CSV & XLSX.

ES5 Support, can be used in the simple HTML pages for some reactive applications like Angular, React, .Net, Java and NodeJS.

Install ExcelJs

To install the ExcelJs package execute the following command, which is the main player to deal with Excel format-related functionalities we want to achieve

npm install –save [email protected]

For more info or reference, you can check https://www.npmjs.com/package/exceljs this link.

Install FileSaver

We require FileSave.js to deal with operations like saving files on the disk. It is mainly used in web applications to store large files in the system.

Run the following command to install the file-saver

npm install –save file-saver

Configure tsconfig.json

Open the tsconfig.json file at the project root, then add the “paths” property under the “compiler options” with “ExcelJs” library location

tsconfig.json

“compiler options”: {

“paths”: {

“exceljs”: [

“node_modules/exceljs/dist/exceljs.min”

]}}

Create a Service For ExcelJs

Now we’ll create a new service to keep the Excel-related method in one place so that we don’t have to write the whole code again and again for one functionality. To generate an excel service in the service folder execute the following command.

ng generate service services/excel

This will create an ExcelService under the services folder

Update the ExcelService

Now open the excel.service.ts file inside the services folder and make the following changes:

import { Workbook } from ‘ExcelJs’;

import * as fs from ‘time-saver;

We will create a separate method in excel.service.ts called generate excel().

Now we will give Title to the excel File Like “User Data”

So, we will just declare a variable named Title and give value to it.

const title = ‘User Data’

now, we will set the header and values of the column randomly

let’s suppose we have a JSON like

const user-list = [

{

name: ‘Rakesh’,

designation: ‘Software Developer’,

address: ‘Delhi’,

gender: ‘Male’

},

{

name: ‘Kapil’,

designation: ‘QA’,

address: ‘Noida’,

gender: ‘Male’

}, {

name: ‘Sunita’,

designation: ‘HR’,

address: ‘Gurgaon’,

gender: ‘Female’

}

]

For setting the header randomly from keys of JSON, we will use

const header = Object.keys(userList[0])

This will take all the keys from the 0 index from the JSON and then the Object.keys() method will return the keys of the 0 index from the JSON into the header variable in the form of an array.

Create Workbook and Add Worksheet

Create a new workbook and add a new worksheet using add worksheet() method of Workbook.

const workbook = new Workbook()

const worksheet = workbook. add worksheet(‘User Report’)

To read complete blog kindly click on the following link- Exceljs example angular

Creators
1

About the Creator

Devstringx Technologies

Devstringx Technologies is the industry leader in providing world-class Angularjs development services in India & the United States. We started in 2014, Our headquarter is located in Noida, UP & another branch is situated in Lewes, DE, USA.

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.