Угловой 2 Лучший подход к использованию FileSaver.js

Question

Мне нужно использовать FileSaver.js (https://github.com/eligrey/FileSaver.js/) в моем приложении Angular2.

Я знаю, что могу добавить его как файл сценария на главной странице html, и он будет работать. Но мне было интересно, какой был бы лучший подход в случае приложения Angular 2 (TypeScript), чтобы я мог просто вызвать window.saveAs для сохранения файла.

Answer 1

Если вы используете Угловое-CLI для создания вашего проекта, вы можете установить его, запустив

npm install file-saver --save 

Поскольку нет никаких типизации для FileSaver, я должен был сделать:

declare module "file-saver"; 

в моем typings.d.ts файле.

Затем, чтобы использовать его:

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

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

Для справки, эти шаги от Angular-Cli's steps for installing third-party libraries

Edit 9/27/2017: Похоже, теперь есть определение типа для FileSaver. JS according to the README instructions, поэтому вместо

declare module "file-saver" 

вам просто нужно

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

Answer 2

Просто делать npm install file-saver --save - хорошее начало. Вам также нужен файл объявления типов (например, file-saver.d.ts или typings.d.ts), так как эта библиотека находится в простом javascript. Обычно вы получите его, выполнив npm install @types/file-saver, но этот пакет в настоящее время устарел.

Я создал файл-saver.d.ts для себя - просто поместите его в свою исходную директорию.

файл-saver.d.ts

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

Затем вы можете использовать SAVEAS следующим образом:

your.ts

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

Конечно, не забудьте обновить конфигурацию вашего загрузчика.

Для SystemJS вам нужно что-то вроде этого:

/** 
* 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); 

Answer 3

мне удалось заставить его работать, используя этот подход (радиально-CLI):

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

После этого импорта Filesaver в компоненте:

import * as FileSaver from 'file-saver'; 

И вы можете использовать его следующим образом:

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

Как вы можете видеть, вам не нужно ничего добавлять в angular-cli.json. Просто установите библиотеку и ее типы, импортируйте ее, и вы готовы к работе.