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 better-scroll插件使用详解

    vue better-scroll插件使用详解

    本篇文章主要介绍了vue better-scroll插件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 移动端底部导航固定配合vue-router实现组件切换功能

    移动端底部导航固定配合vue-router实现组件切换功能

    经常遇到这样的需求,移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
    2019-06-06
  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • vue 根据选择的月份动态展示日期对应的星期几

    vue 根据选择的月份动态展示日期对应的星期几

    这篇文章主要介绍了vue 如何根据选择的月份动态展示日期对应的星期几,帮助大家更好的利用vue框架处理日期需求,感兴趣的朋友可以了解下
    2021-02-02
  • Vue实现dom元素拖拽并限制移动范围的操作代码

    Vue实现dom元素拖拽并限制移动范围的操作代码

    这篇文章主要介绍了Vue实现dom元素拖拽并限制移动范围的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • Vue.js如何实现路由懒加载浅析

    Vue.js如何实现路由懒加载浅析

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能,发现网上这方面的资料较少,所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    这篇文章主要为大家详细介绍了vue.js评论发布信息可插入QQ表情功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vuejs 实现简易 todoList 功能 与 组件实例代码

    Vuejs 实现简易 todoList 功能 与 组件实例代码

    本文通过实例代码给大家介绍了Vuejs 实现简易 todoList 功能 与 组件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue Validate表单组件的封装详解

    Vue Validate表单组件的封装详解

    这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下
    2023-09-09
  • Element Popover 弹出框的使用示例

    Element Popover 弹出框的使用示例

    这篇文章主要介绍了Element Popover 弹出框的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论