Angular2 FileSaver.js

Posted 2023-05-07

【中文标题】Angular2 FileSaver.js

【英文标题】：

【发布时间】：2016-12-05 16:23:27

【问题描述】：

我正在使用带有 angular 2 的 FileSaver.js，它工作得很好；但是，我在构建中遇到了语义错误：

错误 TS2304：找不到名称“saveAs”

我正在使用 angular 2 种子并将库添加到我的 project.config 中，如下所示：

this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
src: 'file-saver/FileSaver.min.js', inject: true,

    ];


this.SYSTEM_CONFIG_DEV.paths['file-saver'] =
        `$this.APP_BASEnode_modules/file-saver/FileSaver`;

    this.SYSTEM_BUILDER_CONFIG.packages['file-saver'] = 
      main: 'FileSaver.js',
      defaultExtension : 'js'
    ;

我可以在我的组件中使用 saveAs：

downloadFile(data: any)

        var blob = new Blob([data],  type: 'text/csv' );

        //saveAs is a function in the FileSaver.js library https://github.com/eligrey/FileSaver.js
        saveAs(blob, "results.csv");
    

问题是语义错误导致我的构建在推送到我的云环境时失败。

我尝试通过以下方式添加输入：

npm i @types/file-saver

这允许我导入：

import  saveAs  from 'file-saver';

但是，这给了我错误：

h.saveAs 不是函数

【参考方案1】：

其实只是想通了。我需要删除变量以便打字稿使用它：

declare var saveAs:any;

【参考方案2】：

由于 FileSaver 没有任何类型，我使用了以下方法。

对于 Typescript 1.8，您可以使用

导入

从以下链接下载 FileSaver.js 并保存在我的项目目录中。

https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js

2.然后在我想使用 FileSaver 的组件中，我加载了保存的 FileSaver.js 并使用

为其分配了一个引用

让 fileSaver = require('../../assets/js/FileSaver');

在我的导入之后。

现在我想在任何地方使用 FileSaver 保存文件，我会使用它来调用它

fileSaver.saveAs(blob, 文件名);

但是，对于 Typescript 2.x，您可以使用

导入

import * as filesaver from '../../assets/js/FileSaver';

并将其用作：

fileSaver.saveAs(blob, 文件名);

【参考方案3】：

其他解决方案是安装 FileSaver 类型的包

npm install --save @types/filesaver

由于 TSConfig 默认在目录 @types/* 中查找类型，因此它将在您的整个代码/应用程序中自动识别。

【讨论】：

我试过这样做，但得到上面提到的错误 h.saveAs 不是函数