Convert the html content to document file in Angular

Converting HTML Content to Document Files in Angular with the docx Package

In the world of web development, handling and converting content between different formats is a common task. One such task is converting HTML content into document files, which can be particularly useful for generating reports, creating documents, or exporting data. In this blog post, we’ll explore how to achieve this conversion seamlessly in an Angular application using the docx package.

Why Convert HTML to Document Files?

Before diving into the technical aspects, let’s briefly discuss why converting HTML to document files is necessary. HTML is the standard markup language for creating web pages, but sometimes you may need to present or share your content in a different format. Document files, such as Microsoft Word documents (docx), offer a widely accepted format for sharing information, particularly in professional settings. By converting HTML to docx, you can maintain formatting consistency and easily share your content with others.

Introducing the docx Package

The docx package is a powerful tool for creating and manipulating Microsoft Word documents programmatically. It provides a straightforward API for generating docx files from scratch or from existing content. In our case, we’ll leverage its capabilities to convert HTML content into a docx document seamlessly.

Setting Up the Angular Project

First, ensure you have a working Angular project set up. If not, you can create one using the Angular CLI:

ng new html-to-docx-converter

Next, navigate to the project directory:

cd html-to-docx-converter

Install the docx package using npm or yarn:

npm install --save docx

Writing the Conversion Logic

Now, let’s create a service in Angular responsible for converting HTML content to a docx file. Create a new file named html-to-docx.service.ts and add the following code:

import { Injectable } from '@angular/core';
import { Packer, Document, Paragraph } from 'docx';

@Injectable({
  providedIn: 'root'
})
export class HtmlToDocxService {

  constructor() { }

  convertToDocx(htmlContent: string, fileName: string): void {
    const doc = new Document();
    const paragraphs = htmlContent.split('<br>').map(text => new Paragraph(text));
    doc.addSection({
      properties: {},
      children: paragraphs
    });

    Packer.toBlob(doc).then(blob => {
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName + '.docx';
      link.click();
    });
  }
}

Utilizing the Service in Your Component

Now, you can utilize the HtmlToDocxService in any Angular component where you want to perform the conversion. Here’s an example of how you can use it:

import { Component } from '@angular/core';
import { HtmlToDocxService } from './html-to-docx.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private htmlToDocxService: HtmlToDocxService) { }

  convertToDocx(): void {
    const htmlContent = '<h1>Hello</h1><p>This is a sample HTML content.</p>';
    const fileName = 'converted_document';
    this.htmlToDocxService.convertToDocx(htmlContent, fileName);
  }
}

In this example, convertToDocx() is called to convert the HTML content to a docx file. You can replace the htmlContent variable with your desired HTML content.

Conclusion

In this blog post, we’ve explored how to convert HTML content to document files (docx) in an Angular application using the docx package. By leveraging the capabilities of the docx package, you can seamlessly generate docx files from HTML content, opening up possibilities for creating dynamic reports, documents, and more within your Angular projects.