Question

我正努力让FileSaver在我的项目中工作。这是我采取的确切步骤

npm install filesaver.js --save
在app.component.ts内部

从'filesaver.js'导入*作为FileSaver;

然后我收到此错误

找不到模块'filesaver.js'。

我还尝试将以下内容添加到我的angular-cli.json文件

  "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

This是我能找到的最接近可能有帮助的地方。但是，这个家伙和我有不同的设置。必须有一种简单的方法来正确使用这个文件吗？

注意，从npm安装FileSaver后，在我的node-module中，我得到filesaver.js文件夹（不知道为什么他们将.js作为文件夹名称）。在这个文件夹中，我得到了FileSaver.js和FileSaver.min.js

我也试过

从'filesaver.js / FileSaver.min.js'中导入*作为FileSaver;

但那只是给了我

找不到模块'filesaver.js / FileSaver.min.js'。）

---- ---更新

我也通过

typings file

npm i @types/filesaver

，结果相同

---- -----更新

以下是我如何使用它。

添加了@ types / filesaver并添加了以下代码。

declare module 'filesaver' {
    var saveAs: any;
    export = saveAs;
}

请注意。我正在修改node_module文件中的内容是不是很糟糕。这意味着每次用户运行npm install时，自定义代码都不会存在。如何绕过它？

从npm下载的默认文件夹名称是filesaver.js。我把它改成了filesaver。为什么在世界上他们将其命名为.js，程序似乎无法将其识别为文件夹

然后从'filesaver'

然后我可以打电话

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
filesaver.saveAs(blob, "hello world.csv");

-----文件夹结构-----

angular-cli：1.0.0-beta.26节点：6.9.1 os：darwin x64 @angular / common：2.4.5 @ angular / compiler：2.4.5 @ angular / core：2.4.5 @ angular / forms：2.4.5 @ angular / http：2.4.5 @ angular / material： 2.0.0-beta.1 @ angular / platform-browser：2.4.5 @ angular / platform-browser-dynamic：2.4.5 @ angular / router：3.4.5 @ angular / compiler-cli：2.4.5

Answer 1

添加到angular-cli（你做了）

 "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

然后添加到src / typings.d.ts

declare function saveAs(data: Blob, filename: string)

现在您可以使用此方法而无需任何导入。

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
saveAs(blob, "hello world.csv");

工作原理。

您不应该创建typings.d.ts，它由angular-cli添加，因此它必须位于项目内的 src 文件夹中。
当您在部分脚本中添加angular-cli.json时，所有脚本将在页面开始时加载。这就是为什么包含来自 node_modules 的脚本非常重要的原因，就像您执行“../node_modules/filesaver.js/FileSaver.min.js”一样。并且包中添加了 - save 标记，就像你一样，所以任何时候删除文件夹，你调用npm install你的脚本就会到位。 3。

获取外部JS库以用于Angular 2

1 个答案: