Vue之读取并解析ini文件中的内容
更新时间:2023年10月11日 15:44:50 作者:华北周黑鸭
这篇文章主要介绍了Vue之读取并解析ini文件中的内容,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue读取并解析ini文件内容
今天接到个任务,老大让使用js读取并解析ini文件中的内容,
内容如下:
于是,一通百度加群友,然后结合并加以修改找到了可用的办法:本人vue2.7版本。
操作过程
使用FileReader
对象和ini-parser
库来解析INI文件
首先,安装ini-parser
库:
在Vue组件中,创建一个文件选择框和一个用于解析INI文件的方法,本人使用element组件库
在组件中引用ini-parser插件,并在methods中编写方法
在页面中选择ini文件就能看到解析后的ini文件中的数据了
相关代码
html:
<el-upload ref="csvData" accept=".ini" action="" :on-change="readInI" webkitdirectory style="margin: 0 3px"> <el-button type="primary" size="mini"> <i class="el-icon-upload">选择INI配置文件</i> </el-button> </el-upload>
Js:
<script> import IniParser from 'ini-parser' export default { data () { return { configFile: null } }, mounted () { }, methods: { // 读取csv文件 readInI (file) { const files = file.raw if (files) { const reader = new FileReader() reader.onload = () => { const fileContent = reader.result const parsedIni = IniParser.parse(fileContent) // 在这里可以处理解析后的INI文件内容 console.log(parsedIni) this.configFile=parsedIni //将解析后的内容进行赋值 } reader.readAsText(files) } } } } </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论