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

Posted 2023-02-22

【中文标题】Angular 2 使用 FileSaver.js 的最佳方法

【英文标题】：Angular 2 Best approach to use FileSaver.js

【发布时间】：2017-03-07 13:14:27

【问题描述】：

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

我知道我可以将它作为脚本文件添加到主 html 页面中，它会起作用。但我想知道对于 Angular 2 (TypeScript) 应用程序，最好的方法是什么，以便我可以调用 window.saveAs 来保存文件。

【问题讨论】：

您使用的是哪个构建工具？

【参考方案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 中添加任何内容。只需安装库及其类型，导入即可。

【讨论】：

没有其他建议对我有用，但这很好。

这是救命稻草。谢谢

我收到了FileSaver.saveAs is not a function。看起来好像我导入的FileSaver 实际上是函数saveAs。好像@type 和实现之间存在差异

你可以在 devDependencies 中保存：npm install @types/file-saver --save-dev

@RDV，是的，这是设计使然。

【参考方案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's steps for installing third-party libraries

编辑 9/27/2017：现在似乎有 FileSaver.js according to the README instructions 的类型定义，而不是

declare module "file-saver"

你只需要

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

【讨论】：

我遇到了与上述相同的挑战，但我没有使用 angular-cli。我安装了 filesaver 模块，将其添加到我的 system.config.js 中。但是，当它加载一些文件保护程序依赖项时，它给出了 404，因为它找不到 .js 扩展名来加载它们。请帮忙

@Elliott08 应该！我至少在 Angular 5 项目中使用过它。

【参考方案3】：

只是做npm install file-saver --save 是一个好的开始。您还需要一个打字稿声明文件（如file-saver.d.ts 或typings.d.ts），因为这个库是纯javascript 格式的。通常你会通过npm install @types/file-saver 得到它，但这个包目前已经过时了。

我为自己创建了一个 file-saver.d.ts - 只需将它放在您的源目录中即可。

file-saver.d.ts

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

那么就可以使用saveAs如下：

你的.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);

【讨论】：

感谢您提供 filesaver.d.ts。这就是我所需要的。

【参考方案4】：

即使不像其他人提到的那样很好，我更喜欢使用来自 NPM 的现有包，称为 ngx-filesaver。它甚至适用于 Angular Universal。

只要做：

npm install file-saver ngx-filesaver --save

包含到您的模块项目中：

...
import  FileSaverModule  from 'ngx-filesaver';
...
@NgModule(
  imports: [ FileSaverModule ]
)
...

然后将服务加载到您的组件：

....
import FileSaverService from 'ngx-filesaver';
...

@Component(
    ...
)
...
constructor(Http, private fileSaverService: FileSaverService) 


onSave() 
 workbook.xlsx.writeBuffer()
      .then( (buffer) => 

        //I am saving spreadsheed ( XLSX ) buffer here...
        this.fileSaverService.save(new Blob([buffer],  type: 'application/octet-stream'), `$fileName.xlsx`);

      );

更多详情请访问：https://www.npmjs.com/package/ngx-filesaver

【讨论】：

ngx-filesaver 依赖于filesaver.js，仍然不能解决问题。

不确定“不能解决问题”是什么意思，在这个线程的另一个答案中，它甚至可以通过自定义打字稿定义来工作：***.com/a/41265382/3168185。

我在安装 FileSaverService 时仍然遇到同样的错误。简单地安装 @types/file-saver 也不能解决我的问题，可能是因为我在严格模式下使用 angular。起作用的是安装file-saver-es，在我的代码中引用“file-saver-es”，然后将“file-saver-es”重定向到我的tsconfig.json中的@types/file-saver。很烂，但它是 only 对我有用的配置。

以前从未有过这种体验。感谢分享。希望对其他人有所帮助。