angular 读写本地电脑文件

angular将数据写进到电脑文件

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

插件安装:

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 读写文件完成了!哈哈哈!好不容易!我小白,搞了一上午。

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​