zoukankan      html  css  js  c++  java
  • 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 读写文件完成了!哈哈哈!好不容易!我小白,搞了一上午。

  • 相关阅读:
    requests
    Unit5 Going places
    Unit1 A time to remember
    SQL:找到一个关于all some any的用法,可在SSMS里看效果
    SQL join小结
    mac 配置tomcat
    oc与java c++语法区别
    swift调用oc项目
    java网络编程之socket
    windows远程控制mac
  • 原文地址:https://www.cnblogs.com/wjw1014/p/11713706.html
Copyright © 2011-2022 走看看