A simple module to export the html or table elements to downloadable file.
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.
(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);
});
}
polyfills.ts
demoBasically 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'
}
}
}
1.0.0
1.1.0
1.1.1
1.2.0
1.2.2
1.2.3
1.2.4
1.2.6
.subscribe()
1.3.0
1.3.1
1.4.0
1.4.1
1.4.2
1.5.0
1.12.0
1.12.1
1.12.2
1.13.0
1.14.1
1.15.0
1.15.1
1.16.0
1.17.0