ngx-export-as/README.md

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

# 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
    elementIdOrContent: '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.exportAsConfig).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 <breakersniper@gmail.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:

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

- **1.19.0**

  - Angular 19 PR #116, thanks to ralphinevanbraak

- **1.20.0**
  - Angular 20 PR #118, thanks to jhoglin