Exporting Data to Word file using Angular

In this article, we saw how to export the word file of the data. In this article, we generate a Word file on the client-side.
Client Side Download Word: It’s helpful to reduce the API call on the server and then download.
In this article, we use 2 libraries “docx” & “FileSaver”. Let’s start to create a new project then install these modules.


ng new wordfile-generate

“wordfile-generate” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd wordfile-generate”. To Run angular applications, it required to run “ng serve”.

After we need to install “docx” & “FileSaver”


npm i docx
npm i file-saver

After install module. we create class for download the word file.
We need to import “docx” & “file-saver”


import { Packer } from "docx";
import * as fs from 'file-saver';

Let’s create app.component.ts ,DocGenerator class & app.component.html. Display in the below code.


import { AlignmentType, Document, HeadingLevel, Packer, Paragraph, TabStopPosition, TabStopType, TextRun, BorderStyle, Table, TableCell , TableRow} from "docx";

export class DocumentCreator {


  public create(): Document {
    const document = new Document();

    let content = '';
    const heading = new Paragraph({
                    text: "Jugal Rana",
                    heading: HeadingLevel.TITLE,
                });

    const contactInfo = this.createContactInfo('+98182328X', 'https://www.eduforbetterment.com', 'info@eduforbetterment.com');

    const headingedu =  this.createHeading("Education");

    const educationtext = this.educationtext();


  document.addSection({ children: [heading,contactInfo,headingedu,educationtext] });

  return document;

  }


public createContactInfo(phoneNumber: string, profileUrl: string, email: string): Paragraph {
        return new Paragraph({
            alignment: AlignmentType.CENTER,
            children: [
                new TextRun(`Mobile: ${phoneNumber} | Website URL: ${profileUrl} | Email: ${email}`),
                new TextRun("").break(),
            ],
        });
    }

   public createHeading(text: string): Paragraph {
        return new Paragraph({
            text: text,
            heading: HeadingLevel.HEADING_1,
            thematicBreak: true,
        });
    }

    public educationtext(): Paragraph{

       return new Paragraph({
            text: "B.E. IT - 2005 to 2009",
            
        });

    }

}


import { Component, VERSION } from '@angular/core';
import { Packer } from "docx";
import * as fs from 'file-saver';
import { DocumentCreator } from "./doc-generator";


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;



   public download(): void {
    const documentCreator = new DocumentCreator();
    const doc = documentCreator.create();

    Packer.toBlob(doc).then(buffer => {
      console.log(buffer);
      fs.saveAs(buffer, "example.docx");
      console.log("Document created successfully");
    });

 
    
  }

}


<h1>Word Document Generate</h1>

<button (click)="download()">Generate Word Document</button>

Below is the full embeded code export Word file in Angular using “docx” & “FileSaver”. you can easily used in your application.
Example

Spread the love

Education For Betterment

Exporting Data to Word file using Angular

About The Author

Jugal Rana

Related Posts

About The Author