how to use SheetJS (js-xlsx) in angular 2

Question

I\'m learning angular2 and i wanted to use js-xlsx library in my project.

I installed xlsx npm install xlsx and jszip npm install jszip an

Answer 1

I installed the xlsx package, e.g. "npm install --save xlsx". It updated the package.json file with xlsx as a dependency. And now in my component I can import it, e.g. "import * as XLSX from 'xlsx' ". I'm using Angular 4. I guess, in Angular 2 it should work exactly the same way. P.S. There is no need to include the javascript file in the index.html.

Answer 2

For making xlsx work for angular 2+, you don't need any typings to be installed. Because the xlsx library contains the required typings in the package itself.

Step 1: Install xlsx using npm

npm install xlsx

Step 2: Import xlsx in your service/component.

const XLSX = require('xlsx');

OR 

import * as XLSX from 'xlsx'; -- (This did not work for me)

Step 3: You can use the XLSX as below.

XLSX.utils.json_to_sheet(json);

Answer 3

tryout ts-xlsx, it's simple to use
npm install --save ts-xlsx
then install the typings
npm install --save @types/xlsx

/* You can use as namespace: */
import * as XLSX from 'ts-xlsx';
let wb: XLSX.IWorkBook = XLSX.read(...)

/* Or straight forward import */
import { read, IWorkBook } from 'ts-xlsx';
let wb: IWorkBook = read(...)

Answer 4

Something else you might try is changing the link to use the full version, instead of core. The following worked for me:

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

This will change with your path. Yours would be:

<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>

Answer 5

The following is a working component who exports an xlsx file from an array of objects using js-xlsx lib on Angular 2/4:

import { Component, OnInit } from '@angular/core';

import { utils, write, WorkBook } from 'xlsx';

import { saveAs } from 'file-saver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  table = [
    {
      First: 'one',
      Second: 'two',
      Third: 'three',
      Forth: 'four',
      Fifth: 'five'
    },
    {
      First: 'un',
      Second: 'deux',
      Third: 'trois',
      Forth: 'quatre',
      Fifth: 'cinq'
    },
  ];

  ngOnInit() {
    const ws_name = 'SomeSheet';
    const wb: WorkBook = { SheetNames: [], Sheets: {} };
    const ws: any = utils.json_to_sheet(this.table);
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;
    const wbout = write(wb, { bookType: 'xlsx', bookSST: true, type: 
'binary' });

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xFF;
  };
  return buf;
}

saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'exported.xlsx');
  }
}

You have to install xlsx and file-saver for this to work.

For the working example on exporting a xlsx file from an array of jsons on Angular2/4:

https://github.com/bogdancar/xlsx-json-to-xlsx-demo-Angular2

Answer 6

An easier method would be not using typings at all:

1. Add xlsx.core.min.js to your index.html file as you did. (I'm using angular-cli so my js files get copied to the dist/vendor directory)

   <script src="vendor/xlsx/dist/xlsx.core.min.js"></script>

2. In your module, do not use import but declare XLSX under your imports block.

   declare var XLSX: any;

If you're using angular-cli, you will need to add xlsx to your angular-cli-build.js file.

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
       ....
      'xlsx/**/*.+(js|js.map)'
    ]})
};