@tn1027/ngx-export-as
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Angular 2+/Ionic 2+ Html to file export

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

npm version

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
  • JSON - .json
  • XML - .xml

Used libraries "Useful for custom format options"

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');
    // 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

Package Sidebar

Install

npm i @tn1027/ngx-export-as

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

355 kB

Total Files

28

Last publish

Collaborators

  • thuannh1027