Home

Awesome

Angular 2+/Ionic 2+ Html to file export

Typescript angular module to export Table/HTML to popular file formats

npm version

A simple module to export the html or table elements to downloadable file.

Supported Formats:

Used libraries "Useful for custom format options"

Demo

Running the demo:

git clone https://github.com/wnabil/ngx-export-as.git
cd ngx-export-as
npm install
ng build ngx-export-as
ng serve

Then navigate to localhost:4200 via your browser.

Get Started

(1) Get Angular export as package:

npm install --save ngx-export-as

(2) import ngx-export-as in your app.module.ts and imports array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ExportAsModule } from 'ngx-export-as';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ExportAsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

(3) Import 'ExportAsService, ExportAsConfig' into your component.

import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  exportAsConfig: ExportAsConfig = {
    type: 'png', // the type you want to download
    elementId: 'myTableElementId', // the id of html/table element
  }
  constructor(private exportAsService: ExportAsService) { }

}

(4) Use the available methods into your component to download or get the required data type.

  function export() {
    // download the file using old school javascript method
    this.exportAsService.save(this.exportAsConfig, 'My File Name').subscribe(() => {
      // save started
    });
    // get the data as base64 or json object for json type - this will be helpful in ionic or SSR
    this.exportAsService.get(this.config).subscribe(content => {
      console.log(content);
    });
  }

IE Users

Contribution, Ideas and pull requests are welcome, Please open an issue on Github or contact me on w.nabil@orangestudio.com if i didn't response in approx 2 days.

Configuration

Basically all configurable options are wrapped into exportAsConfig object. For the special options for each format alone please set your custom options inside exportAsConfig.options object. Example:

const exportAsConfig: ExportAsConfig = {
  type: 'docx', // the type you want to download
  elementId: 'myTableIdElementId', // the id of html/table element,
  options: { // html-docx-js document options
    orientation: 'landscape',
    margins: {
      top: '20'
    }
  }
}

Important Notes

Change Logs