angular 读写电脑本地文件

沐白云摘

angular 读写本地电脑文件

angular将数据写进到电脑文件

在前端写一个按钮，然后点击按钮的时候在本地电脑保存一个text文件。
这时候我们需要用到一个angular的插件，叫做“FileSaver.js”
官方github：https://github.com/eligrey/FileSaver.js

插件安装：

npm install file-saver --save

html：

<button style="background-color: yellow;float: left" (click)="writeText()">将此配置读入文件</button>

ts：

 writeText() {
    if (confirm('确定保存？')) {
      const str = '这是文件的内容'
      const FileSaver = require('file-saver');
      const blob = new Blob([str], {type: 'text/plain;charset=utf-8'});
      FileSaver.saveAs(blob, '这是文件名.txt');
    }
  }

ok ,文件保存到本地就可以实现了。然后是读取本地文件。

从电脑本地读取文件到angular

在前端创建一个按钮来读取文件
html：

  <form style=" background-color: olivedrab" [formGroup]="myForm">
    <input  formControlName="EDI" type="file" class="form-control" (change)="handleFileSelect($event)">
  </form>

ts：

  handleFileSelect(evt) {
    var files = evt.target.files; 
    var f = files[0];
    var reader = new FileReader();

    reader.readAsText(f);
    reader.onload = (f => {
      return e => {
        this.JsonObj = e.target.result;
        console.log(this.JsonObj)  // 打印出文件内容
      };
    })(f);

  }

ok ! angular 读写文件完成了！哈哈哈！好不容易！我小白，搞了一上午。

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】本博文为个人学习记录，观点仅为个人见解，不代表技术领域的最终结论。撰写目的主要在于自我总结与经验分享，欢迎批评指正，本人将虚心改进。内容仅供参考，非专业建议，请理性判断。
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014


来源：https://www.cnblogs.com/wjw1014/p/11713706.html