CODEWITHSUNDEEP
javascripttypescriptangularxlsx
gattsbr
gattsbr

Reputation: 3772

Exporting xlsx files in angular2 (typescript)

I need to get data to export to an xlsx file from an angular2 application that is in development.

Maybe I am really just looking for help getting a couple of libraries to load. A couple of things I've found are this jsfiddle and this stackoverflow. I'd like to get something like this working, in angular2. Any attempts to get alasql to work have been met with errors stating it's not a module and such. Trying to follow approaches listed on various blogs, such as this one result in errors like "cannot read property 'compile' of undefined"

In the previously mentioned jsfiddle is an example of what I'd like to get working:

var res = alasql('SELECT INTO XLSX("MyAwesomeData.xlsx",?) FROM ?',[opts,[data1,data2]]);

I'm open to other tools, but the above would work for me -- if I could get it to work with angular2.

Upvotes: 2

Views: 4084

Answers (2)

Kriti
Kriti

Reputation: 2393

To export json to excal file in angular 2, you can make use of alasql npm module.

  1. Install npm modules 

    i)  npm install --save alasql 
ii) npm install --save xlsx

  2. In angular-cli.json, under scripts add the following node module scripts

    "scripts": [
"../node_modules/xlsx/dist/xlsx.core.min.js",
"../node_modules/xlsx/dist/xlsx.min.js",
"../node_modules/alasql/dist/alasql.min.js"

    ]

  3. In the component where you need to export the file add the below import statement:
    import * as alasql from 'alasql';

  4. On button click function add the following code:- 

    buttonClick(){
var data1 = [{a:1,b:10},{a:2,b:20}];
var mystyle = {
  headers:true, 
  column: {style:{Font:{Bold:"1"}}},
  rows: {1:{style:{Font:{Color:"#FF0077"}}}},
  cells: {1:{1:{
    style: {Font:{Color:"#00FFFF"}}
  }}}
};
 alasql('SELECT * INTO XLSXML("tdts.xls",?) FROM ?',[mystyle,data1]);

    }

Upvotes: 3

Abdelrhman Hussien
Abdelrhman Hussien

Reputation: 374

Recently, I have faced the same problem. Simple alasql is not angular 2 module but still you could use it with angular 2. simple include it like in the old way.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

then add this line after the imports in the component or the service file wher you need to use alasql.

declare let alasql

that works perfectly for me here is the link

good luck

Upvotes: 1

Related Questions