Angular 2+/Ionic 2+ Html to file export
Typescript angular module to export Table/HTML to popular file formats
A simple module to export the html or table elements to downloadable file.
Supported Formats:
- Image - .png
- PDF - .pdf
- CSV - .csv
- Text - .txt
- Microsoft Excel sheets - .xls, .xlsx
- Microsoft Word documents - .doc, .docx "REQUIRES TARGET CONFIG es2015" source issue
- JSON - .json
- XML - .xml
Used libraries "Useful for custom format options"
- PNG - HTML2Canvas
- PDF - HTML2PDF
- Microsoft Excel sheets - SheetJS js-xlsx
- Microsoft Word documents - html-docx-js
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
- For Microsoft Internet Explorer this library requires many polyfills, please enable all BROWSER POLYFILLS.
- typedarray Custom polyfill is also required.
- Please refere to
polyfills.ts
demo
w.nabil@orangestudio.com if i didn't response in approx 2 days.
Contribution, Ideas and pull requests are welcome, Please open an issue on Github or contact me onConfiguration
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
- Json type get method will return the data in json object format not as base64
- Not all the libraries supports the html element, for example the json and xlsx formats required the element to be an HTML Table
Change Logs
-
1.0.0
- Initial release
- Implement all available methods
-
1.1.0
- Upgrade to Angular 6
-
1.1.1
- fix issue #5
-
1.2.0
- switch to ng lib, ng-packagr
-
1.2.2
- fix readme and license
-
1.2.3
- Fix issue #9 - update readme
- Fix issue #12 - Add support for internet explorer "Please check the docs section for IE"
- Fix issue #15 - Support for angular 4 and 5
- Fix issue #16 - add support for special language chars
-
1.2.4
- fix all pdf issues for html2canvas - #1, #3, #11
-
1.2.6
- Save method now will return a subscription, please make sure to trigger
.subscribe()
- Save method now will return a subscription, please make sure to trigger
-
1.3.0
- Upgrade to Angular 8
-
1.3.1
- Add support for PDF header, footer, page number and other possible actions before rendering - Thanks to Sreekanth2108 #35 fix #38
-
1.4.0
- Remove docx library as a temp solution for SSR builds, fix #21 - please use v1.3.1 until we have a new implementation for docx
-
1.4.1
- Update for Angular 9
-
1.4.2
- Fix #61 add support for any element type for pdf: available types now are string, element, canvas, img or element id
-
1.5.0
- Fix #84 Support for Angular 10, Thanks to kgish
-
1.12.0
- Upgrade to Angular 12
-
1.12.1
- fix #76 Re-enable docx "project target es2015 is required"
-
1.12.2
- fix #97, fix csv comma, Thanks to souradeep07
-
1.13.0
- fix #102, Upgrade to Angular 13
-
1.14.1
- fix #109, Angular 14
- DOCX is not supported check this issue
-
1.15.0
- fix #110, Support for Angular 15, Thanks to MuhAssar
-
1.15.1
- fix PR #112, html2canvas SSR fix, Thanks to enea4science
-
1.16.0
- Angular 16