将 Filesaver js 与 angular2 一起使用答案

【问题标题】：Use Filesaver js with angular2将 Filesaver js 与 angular2 一起使用
【发布时间】：2017-04-08 12:24:56
【问题描述】：

我已经检查了我能找到的所有关于使用带角度的 Filesaver JS 的帖子，但我仍然无法解决问题。我将此添加到我的 system.config.js 的地图部分

 'filesaver': 'node_modules/filesaver/src/Filesaver.js'

我将此添加到 system.config.js 的包部分

  'filesaver': {defaultExtension: 'js'}

然后我以这种方式将它导入到我的 service.ts 中

import { saveAs } from 'filesaver';

但我得到了这个错误。

有人可以帮忙吗？

【问题讨论】：

标签： angular download save-as filesaver.js

【解决方案1】：

试试下面的

npm install file-saver --save

然后将声明文件添加到您的项目中，例如“declarations.d.ts”并放入其中

declare module 'file-saver';

在您的 systemjs.config.js 中，将以下内容添加到地图部分

'file-saver': 'npm:file-saver/FileSaver.js'

然后将库导入您的组件或服务中，如下所示

import { Component } from '@angular/core';
import * as saveAs from 'file-saver';


@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <button (click)="SaveDemo()">Save File</button>`,
})
export class AppComponent {
  name = 'Angular';

  SaveDemo() {
    let file = new Blob(['hello world'], { type: 'text/csv;charset=utf-8' });
    saveAs(file, 'helloworld.csv')
  }
}

希望对你有帮助。

【讨论】：

感谢它的工作。我首先导入了错误的库
@dipole：来自文件保护程序 github 页面，它告诉我们一种安装 typescript 定义 npm install @types/file-saver --save-dev 的方法。如上所述，我还需要添加声明文件吗？在我的项目根文件夹中，我有一个 app 文件夹和其他文件，例如 systemjs.config.js 文件。如果需要，我应该在哪里添加它？在 app 文件夹内还是在项目根文件夹下？
@Ng2-Fun 我无法让它与打字稿定义一起使用，这就是我采用声明文件的原因。我不断收到“TypeError：file_saver_1.saveAs 不是函数”。您可以将声明文件放在项目根文件夹中。
嗨@dipole - 我在使用打字稿定义时遇到了同样的错误。然后我完全按照你的做法，得到了一个错误：saveAs is not a function。但是最后我发现有一种简单的方法可以不使用filesaver.js来下载文件，而是可以发出http请求，然后调用window.open()来下载图像。
@Ng2-fun 这里也一样。我通过声明来解决它： declare var saveAs:any;在我的组件中，并在我的 html 文件中直接引用 file-saver js 文件。

【解决方案2】：

对于带有 http 的 angular-cli（后跟 httpClient）：

npm install file-saver --save

将此第三方库添加到 .angular-cli.json

"scripts": [
      "../node_modules/file-saver/FileSaver.js"
    ],

在 blabla 服务中：

downloadBlaBlasCSV() {
        let options = {responseType: ResponseContentType.ArrayBuffer };
        return this.http.get(this.config.apiUrl + '/blablasCSV', options)
        .catch((err: Response) => Observable.throw(err.json()));
    }

终于 int 组件：

import { saveAs } from 'file-saver';

downloadBlaBlasCSV() {
    this.blablaService.downloadBlaBlasCSV().subscribe(
      (data) => { this.openFileForDownload(data); },
      (error: any) => {
        ...
      });
  }

openFileForDownload(data: Response) {
    //var blob = new Blob([data._body], { type: 'text/csv;charset=utf-8' });
    //saveAs(blob, 'Some.csv');
    let content_type = data.headers.get('Content-type');
    let x_filename = data.headers.get('x-filename');
    saveAs(data.blob(), x_filename);
  }

httpClient

和http一样，只是服务方式不同：

downloadBlaBlasCSV() {
        return this.httpClient.get(this.config.apiUrl + '/blablasCSV',  {
            headers: new HttpHeaders().set('Accept', 'text/csv' ),
            observe: 'response',
            responseType: 'blob'
        })
    }

【讨论】：

@DevStar 您应该在服务器端将内容类型添加到响应中。对于 python response.headers['Content-type'] = 'text/csv' 或对于 Java response.setContentType("text/csv") ___________ 还有一些标头有时不是从服务器发送的，服务器应该明确地暴露它们。在 python _______response.headers["x-filename"] = 文件名 ___response.headers["Access-Control-Expose-Headers"] = 'x-filename'

【解决方案3】：

我正在使用 Angular 6（我的项目中没有可用的 systemjs.config.js 文件）+ FileSaver。我需要从服务器下载 PDF。这是有效的：

npm install file-saver --save

package.json:

"file-saver": "^1.3.8"

代码：

import { saveAs } from 'file-saver';
...
this.http
      .get<any>("/pdfs/mypdf.pdf", { responseType: 'blob' as 'json' })
      .pipe(
        tap(deployments => this.log(`fetched resoure`)),
        catchError(this.handleError('getResource', []))
      )
      .subscribe(data => {
        console.log(data);
        saveAs(new Blob([data], { type: 'pdf' }), 'data.pdf');
      });

【讨论】：

这对我不起作用。 “在‘文件保护程序’中找不到导出‘saveAs’。