angular 读写电脑本地文件
<h1 id="angular-读写本地电脑文件">angular 读写本地电脑文件</h1><h2 id="angular将数据写进到电脑文件">angular将数据写进到电脑文件</h2>
<p>在前端写一个按钮，然后点击按钮的时候在本地电脑保存一个text文件。<br>
这时候我们需要用到一个angular的插件，叫做“FileSaver.js”<br>
官方github：https://github.com/eligrey/FileSaver.js<br>
<img src="https://img2018.cnblogs.com/blog/1334178/201910/1334178-20191021151216685-1122413661.png" alt="" loading="lazy"></p>
<p>插件安装：</p>
<pre><code>npm install file-saver --save
</code></pre>
<p>html：</p>
<pre><code class="language-html"><button style="background-color: yellow;float: left" (click)="writeText()">将此配置读入文件</button>
</code></pre>
<p>ts：</p>
<pre><code class="language-js"> writeText() {
if (confirm('确定保存？')) {
const str = '这是文件的内容'
const FileSaver = require('file-saver');
const blob = new Blob(, {type: 'text/plain;charset=utf-8'});
FileSaver.saveAs(blob, '这是文件名.txt');
}
}
</code></pre>
<p>ok ,文件保存到本地就可以实现了。然后是读取本地文件。</p>
<h2 id="从电脑本地读取文件到angular">从电脑本地读取文件到angular</h2>
<p>在前端创建一个按钮来读取文件<br>
html：</p>
<pre><code class="language-html"><form style=" background-color: olivedrab" ="myForm">
<inputformControlName="EDI" type="file" class="form-control" (change)="handleFileSelect($event)">
</form>
</code></pre>
<p>ts：</p>
<pre><code class="language-js">handleFileSelect(evt) {
var files = evt.target.files;
var f = files;
var reader = new FileReader();
reader.readAsText(f);
reader.onload = (f => {
return e => {
this.JsonObj = e.target.result;
console.log(this.JsonObj)// 打印出文件内容
};
})(f);
}
</code></pre>
<p>ok !angular 读写文件完成了！哈哈哈！好不容易！我小白，搞了一上午。</p>
</div>
<div id="MySignature" role="contentinfo">
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！<br>
【重要说明】本博文为个人学习记录，观点仅为个人见解，不代表技术领域的最终结论。撰写目的主要在于自我总结与经验分享，欢迎批评指正，本人将虚心改进。内容仅供参考，非专业建议，请理性判断。<br>
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014<br>
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/<br>
【Gitee地址】叫我+V ：https://gitee.com/wjw1014<br><br><br>
来源：https://www.cnblogs.com/wjw1014/p/11713706.html
頁:
[1]