Angulaire 2 Meilleure approche à utiliser FileSaver.js

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

Je sais que je peux l'ajouter à un fichier de script dans la page html principale et il va fonctionner. Mais je me demandais quelle serait la meilleure approche dans le cas d'un rapporteur d'angle 2 (fichier d'enregistrement) application de sorte que je peux juste la fenêtre d'appel.enregistrer sous pour enregistrer le fichier.

Qui outil utilisez-vous?

OriginalL'auteur Naveed Ahmed | 2016-10-25

  1. 49

    J'ai réussi à le faire fonctionner à l'aide de cette approche (Angulaires-CLI):

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

    Après que l'importation Filesaver en 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 pas à ajouter quoi que ce soit dans angulaires-cli.json. Il suffit d'installer la bibliothèque et les types, de l'importation et vous êtes prêt à aller.

    Aucun des autres suggestions ont travaillé pour moi, mais cela ne se fera très bien l'affaire.
    C'était la vie de veille. Merci
    Est-il un moyen de déclencher l'invite de commandes, plutôt que l'auto-téléchargement?
    Je suis FileSaver.saveAs is not a function. Il semble comme si FileSaver j'ai importé est en quelque sorte le fait que la fonction saveAs. C'est comme si il ya un écart entre le @type et de la mise en œuvre
    vous pouvez enregistrer à l'intérieur de devDependencies: npm install @types de fichiers/-veille --save-dev

    OriginalL'auteur Tomislav

  2. 16

    Si vous utilisez Angulaire de la CLI pour construire votre projet, vous pouvez l'installer en exécutant

    npm install file-saver --save

    Car il n'y a pas tout typings pour FileSaver, j'ai eu à 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);

    De référence, ces mesures sont prises à partir de Angulaire de la Cli de la procédure pour l'installation de bibliothèques tierces

    Modifier 9/27/2017: Il apparaît qu'il y a maintenant une définition de type pour FileSaver.js selon les instructions du README, donc au lieu de la

    declare module "file-saver"

    vous avez juste besoin de 

    npm install @types/file-saver --save-dev
    J'ai le même problème décrit ci-dessus, mais je ne suis pas à l'aide de la angulaires-cli. J'ai installé le filesaver module, ajouté à mes system.config.js. Toutefois, lorsque le chargement de certaines filesaver de dépendance, il a donné 404, car il ne pouvait pas trouver la .js extension pour les charger. S'il vous plaît aider
    est-ce de travailler avec angulaire 5 ?
    Il se doit! Je l'ai utilisé dans Angulaire 5 du projet, au moins.

    OriginalL'auteur cbierman