Angular 2文件保护程序excel文件答案

【问题标题】：Angular 2 file saver excel fileAngular 2文件保护程序excel文件
【发布时间】：2017-06-14 18:23:59
【问题描述】：

我开发了示例 POC 来保存后端 api 传递的 excel 文件。在 UI 中，我将 Angular 2 与 filesaver.js 一起使用。

现在当我尝试调用文件保护程序的“saveAs”功能时，chrome 出现以下错误

TypeError：WEBPACK_IMPORTED_MODULE_2_file_saver.saveAs 不是函数

这是我的 package.json

"文件保护程序": "^1.3.3",

这是我的 angular-cli.json

“脚本”：[“../node_modules/file-saver/FileSaver.js”]，

这是我的 angular2 服务组件

exportFile(){
    this._http.get(this.url,{responseType : ResponseContentType.Blob})
        .map( (response) => {
            let blob = response.blob();
            console.log('Received excel data....');
            return{
                data : new Blob([blob],{type : 'application/vnd.ms-excel'}),
                filename : 'test.xls'
            }
        })
        .subscribe(
            (res)=>{
                console.log('Exporting excel file');
                FileSaver.saveAs(res.data,res.filename);
            }
        )
}

在顶部我已导入文件保护程序，如下所示

import * as FileSaver from 'file-saver';

整个项目位于github上

Angular2 Export Demo

【问题讨论】：

基于错误，导入的对象上不存在 saveAs 函数。您是否尝试过直接导入saveAs？ import * as saveAs from 'file-saver'; 然后像这样使用saveAs(res.data, res.filename)
试图给我一个错误，例如“无法调用类型缺少调用签名的表达式。”

标签： angular filesaver.js

【解决方案1】：

我认为如果它在你的 package.json 中，你不应该在你的 angular-cli.json 中有导入尝试从 angular-cli 中删除行 "../node_modules/file-saver/FileSaver.js"，然后从 node_modules 中删除文件保护程序目录，然后执行 npm install 或更好的 yarn install。

【讨论】：