angular 读写电脑本地文件
2024-09-15 16:43:19
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 读写文件完成了!哈哈哈!好不容易!我小白,搞了一上午。
最新文章
- mysql sql语句执行时间查询
- while do while 区别
- IDataReader转换成list通用方法
- hdu 4631Sad Love Story<;计算几何>;
- ACM之最短路径做题笔记与记录
- 《UNIX环境高级编程》学习心得 二
- tr转换或删除字符
- python filter内建函数
- 大数据揭示的10个常见JAVA编程错误
- Python3-操作系统发展史
- page.isvalid
- Exception类的学习与继承总结
- delphi TreeView 从数据库添加节点的四种方法
- Java 多线程 高可用原则
- nginx 学习资料
- 小程序获取地址授权的修改 wx.openSetting需点击
- Python: str.split()和re.split()的区别
- Python的学习之-计算机编码和二进制
- Leet Palindrome Partitioning II
- iis6下配置支持.net4.0&;发布网站[转]