web-dev-qa-db-fra.com

Angular 2 Meilleure approche pour utiliser FileSaver.js

Je dois utiliser FileSaver.js ( https://github.com/eligrey/FileSaver.js/ ) dans mon application Angular2.

Je sais que je peux l'ajouter en tant que fichier de script dans la page html principale et cela fonctionnera. Mais je me demandais quelle serait la meilleure approche dans le cas d'une application Angular 2 (TypeScript)) pour pouvoir simplement appeler window.saveAs pour enregistrer le fichier.

angularangular2-directivesangular2-servicesfilesaver.js
17
Naveed Ahmed

J'ai réussi à le faire fonctionner en utilisant cette approche (Angular-CLI):

npm install file-saver --save
npm install @types/file-saver --save

Après cela, importez Filesaver dans le composant:

import * as FileSaver from 'file-saver';

Et vous pouvez l'utiliser comme ceci:

    let blob = new Blob([document.getElementById('exportDiv').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-16le"
        });
    FileSaver.saveAs(blob, "export.xls");

Comme vous pouvez le voir, vous n'avez rien à ajouter dans angular-cli.json. Installez simplement la bibliothèque et ses types, importez-la et vous êtes prêt à partir.

61
Tomislav

Si vous utilisez Angular-CLI pour créer votre projet, vous pouvez l'installer en exécutant

npm install file-saver --save

Puisqu'il n'y a aucun typage pour FileSaver, j'ai dû faire:

declare module "file-saver";

dans mon typings.d.ts fichier.

Ensuite, pour l'utiliser:

// Import
import * as FileSaver from "file-saver";

//Implementation
FileSaver.saveAs(blob, filename);

Pour référence, ces étapes sont tirées de étapes Angular-Cli pour l'installation de bibliothèques tierces

Edit 27/09/2017 : Il semble qu'il existe maintenant une définition de type pour FileSaver.js selon le README instructions , donc au lieu du

declare module "file-saver"

vous avez juste besoin de

npm install @types/file-saver --save-dev
16
cbierman

Je fais juste npm install file-saver --save est un bon début. Vous avez également besoin d'un fichier de déclaration TypeScript (comme file-saver.d.ts ou typings.d.ts) pour cette bibliothèque est en javascript simple. Normalement, vous l'obtiendrez en faisant npm install @types/file-saver mais ce package est actuellement obsolète.

J'ai créé un file-saver.d.ts pour moi - il suffit de le placer dans votre répertoire source.

fichier-saver.d.ts

declare function saveAs(data: Blob, filename: string, noAutoBOM?: boolean): void;
declare module 'file-saver' {
    export = saveAs;
}

Ensuite, vous pouvez utiliser saveAs comme suit:

vos.ts

import saveAs = require('file-saver');
function save() {
    let blob = new Blob(['Hello world!'], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'newcontrol.txt');
}

Bien sûr, n'oubliez pas de mettre à jour la configuration de votre chargeur.

Pour SystemJS, vous avez besoin de quelque chose comme ceci:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'file-saver':                'npm:file-saver'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'file-saver': {
        main: './FileSaver.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);
4
Ted

Même pas un excellent moyen comme d'autres personnes l'ont mentionné, je préfère utiliser le package existant de NPM qui a appelé ngx-filesaver . Il fonctionne même très bien avec Angular Universal.

Faites juste:

npm install file-saver ngx-filesaver --save


Inclure dans votre projet de module: 

...
import { FileSaverModule } from 'ngx-filesaver';
...
@NgModule({
  imports: [ FileSaverModule ]
})
...


Chargez ensuite le service dans votre composant: 

....
import {FileSaverService} from 'ngx-filesaver';
...

@Component({
    ...
})
...
constructor(Http, private fileSaverService: FileSaverService) {
}

onSave() {
 workbook.xlsx.writeBuffer()
      .then( (buffer) => {

        //I am saving spreadsheed ( XLSX ) buffer here...
        this.fileSaverService.save(new Blob([buffer], { type: 'application/octet-stream'}), `${fileName}.xlsx`);

      });
}

Plus de détails s'il vous plaît visitez: https://www.npmjs.com/package/ngx-filesaver

0
Bayu