Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wnabil/ngx-export-as

Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, PDF
https://github.com/wnabil/ngx-export-as

Last synced: 5 days ago
JSON representation

Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, PDF

Awesome Lists containing this project

README 

        
# Angular 2+/Ionic 2+ Html to file export

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



[![npm version](https://badge.fury.io/js/ngx-export-as.svg)](https://badge.fury.io/js/ngx-export-as)  



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](https://github.com/privateOmega/html-to-docx/issues/3#issuecomment-886222607)

  - JSON - .json

  - XML - .xml



## Used libraries "Useful for custom format options"

  - PNG - [HTML2Canvas](https://github.com/niklasvh/html2canvas/)

  - PDF - [HTML2PDF](https://github.com/eKoopmans/html2pdf.js)

  - Microsoft Excel sheets - [SheetJS js-xlsx](https://github.com/SheetJS/js-xlsx)

  - Microsoft Word documents - [html-docx-js](https://github.com/evidenceprime/html-docx-js) 



## Demo

 Running the demo:

```bash

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:



```bash

npm install --save ngx-export-as

```



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



```javascript

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.



```javascript 

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.



```javascript 

  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](https://github.com/inexorabletash/polyfill/blob/master/typedarray.js) 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 [email protected] 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:



```javascript

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()`



- **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](https://github.com/privateOmega/html-to-docx/issues/145)



- **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