如何正确使用 Angular 5 中的 FileSaver？答案

【问题标题】：How to use FileSaver in angular 5 correctly?如何正确使用 Angular 5 中的 FileSaver？
【发布时间】：2018-11-11 06:50:21
【问题描述】：

我正在尝试使用文件上传功能将文件保存到文件系统。由于文件是角度应用程序而不是后端（rest api - java）所需要的，我决定将它保存在前端应用程序中，这意味着在里面的某个地方 Angular 应用中的 assets 文件夹。

我已经安装了 angular-file-saver。

模板代码：

<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" (change)="handleFileInput($event.target.files)">

组件代码：

import { FileSaver }  from 'angular-file-saver';

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    //this.imageUpload doesn't have data or something like this 

  }

知道如何将文件实际保存在文件夹中吗？谢谢。

【问题讨论】：

标签： angular file

【解决方案1】：

要使用不同的语言进行编码，请像这样创建 blob：

var blob = new Blob(["\ufeff"+csvArray], { type: 'text/csv;charset=utf-8' })

【讨论】：

【解决方案2】：

简单的语法是：

  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

注意FileSaver.saveAs() 方法，它接受Blob 作为参数。

在您的情况下，它可能看起来像：

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    var data = new Blob([imageUpload], { //your file type here });
    FileSaver.saveAs(data, this.imageFileName);  
  }

注意，您可能还需要将图像转换为 64 位，然后再从 64 位转换回来，以便保存和显示它

完整的例子可以在anguler-file-saver npm 页面找到。

【讨论】：

使用代码时页面未加载：FileSaver.saveAs(data, this.imageFileName) 我已经使用“npm install angular-file-saver”安装了 FileSaver，但这里出了点问题跨度>
看起来那是一个 AngularJS 库，而不是 Angular
那么，我应该卸载它并安装其他东西吗？
是的，有一个名为 ngx-filesaver 的包应该适用于 Angular npmjs.com/package/ngx-filesaver
然后我需要实现 POST 请求

【解决方案3】：

通过安装这些软件包使用 angular start 触发浏览器 saveAs

npm install file-saver @types/file-saver ngx-filesaver --save

将 FileSaverModule 模块添加到您的项目中：

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

然后在您的组件/服务中

//if you have issues with this line you might need to stop ng serve and relaunch it
import { FileSaverService } from 'ngx-filesaver'; 

browserSaveAs(blob: any, filename:string) {
    try {
      this.fileSaverService.save(blob, filename);
    }
    catch (e)
    {
      console.log(e) ;
    }
}

blob可以是文字内容、图片等

【讨论】：