Awesome
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
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
- 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
-
1.17.0
- Angular 17 PR #114, thanks to MuhAssar
-
1.18.0
- Angular 18 PR #115, thanks to AileThrowmountain