Angular 2使用FileSaver.js的最佳方法

Question

我需要在Angular2应用程序中使用FileSaver.js(https://github.com/eligrey/FileSaver.js/).

我知道我可以在主html页面中将其添加为脚本文件,它将起作用.但是我想知道在Angular 2(TypeScript)应用程序中最好的方法是什么,这样我就可以调用window.saveAs来保存文件.

Answer 1

我设法使用这种方法(Angular-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中添加任何内容.只需安装库及其类型,导入它就可以了.

Answer 2

如果您使用Angular-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安装第三方库的步骤

编辑9/27/2017:现在看来根据README说明现在有一个FileSaver.js的类型定义,所以不是

declare module "file-saver"

你只需要

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