web-dev-qa-db-fra.com

comment utiliser SheetJS (js-xlsx) dans angular 2

J'apprends angular2 et je voulais utiliser js-xlsx library dans mon projet.

J'ai installé xlsx npm install xlsx et jszip npm install jszip et les ai ajoutés dans mon index.html 

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

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

et ajouté les définitions TypeScript tsd install xlsx

et j'utilise webpack

mais quand je l'ai utilisé dans 

import * as xlsx from 'xlsx';

mais j'obtiens une erreur module build failed: error: cannot resolve module 'xlsx'

angularxlsx
5
Maged Milad

Une méthode plus simple consisterait à ne pas utiliser de typage:

  1. Ajoutez xlsx.core.min.js à votre fichier index.html comme vous l'avez fait. (J'utilise angular-cli pour que mes fichiers js soient copiés dans le répertoire dist/vendor)

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

  2. Dans votre module, n’utilisez pas import mais déclarez XLSX sous votre bloc d’importations.

    declare var XLSX: any;

Si vous utilisez angular-cli, vous devrez ajouter xlsx à votre fichier angular-cli-build.js.

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)'
    ]})
};
5
Roy S.

Voici un composant fonctionnel qui exporte un fichier xlsx à partir d'un tableau d'objets à l'aide de js-xlsx lib sur 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');
  }
}

Vous devez installer xlsx et File-Saver pour que cela fonctionne.

Pour l'exemple de travail sur l'exportation d'un fichier xlsx à partir d'un tableau de jsons sur Angular2/4:

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

7
BogdanC

tryout ts-xlsx , simple d'utilisation 
npm install --save ts-xlsx 
puis installez les typages 
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(...)
3
shakram02

Pour que xlsx fonctionne avec angular 2+, vous n'avez pas besoin de dactylographie. Parce que la bibliothèque xlsx contient les typages requis dans le package lui-même.

Étape 1: Installez xlsx à l’aide de npm

npm install xlsx

Étape 2: Importez xlsx dans votre service/composant.

const XLSX = require('xlsx');

OR

import * as XLSX from 'xlsx'; - (Cela n'a pas fonctionné pour moi)

Étape 3: Vous pouvez utiliser le XLSX comme ci-dessous.

XLSX.utils.json_to_sheet(json);
1
koolhuman

Vous pouvez également essayer de changer le lien pour utiliser la version complète au lieu de la version principale. Ce qui suit a fonctionné pour moi:

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

Cela changera avec votre chemin. Le vôtre serait:

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

J'ai installé le package xlsx, par exemple "npm install --save xlsx". Il a mis à jour le fichier package.json avec xlsx en tant que dépendance. Et maintenant, dans mon composant, je peux l'importer, par exemple "importer * en tant que XLSX à partir de 'xlsx'". J'utilise Angular 4. Je suppose que, dans Angular 2, il devrait fonctionner exactement de la même manière. PS Il n'est pas nécessaire d'inclure le fichier javascript dans le fichier index.html.

0
user2052324