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 讀寫文件完成了！哈哈哈！好不容易！我小白，搞了一上午。