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文件,多页构建的方法

    今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 如何去掉ElementUI Table的hover变色问题

    如何去掉ElementUI Table的hover变色问题

    这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue使用sign-canvas实现在线手写签名的实例

    Vue使用sign-canvas实现在线手写签名的实例

    sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端,本文给大家分享Vue使用sign-canvas实现在线手写签名,感兴趣的朋友一起看看吧
    2022-05-05
  • vue项目中路径使用@和~的区别及说明

    vue项目中路径使用@和~的区别及说明

    这篇文章主要介绍了vue项目中路径使用@和~的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue实现购物车计算总价功能

    Vue实现购物车计算总价功能

    这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中使用vue-pdf的方法详解

    vue中使用vue-pdf的方法详解

    这篇文章主要介绍了vue中使用vue-pdf的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue.js实现的绑定class操作示例

    vue.js实现的绑定class操作示例

    这篇文章主要介绍了vue.js实现的绑定class操作,结合实例形式分析了vue.js绑定class常见的3种操作技巧,需要的朋友可以参考下
    2018-07-07
  • vue中el-tree 横向滚动条的实现

    vue中el-tree 横向滚动条的实现

    本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下
    2024-09-09
  • vue3.0 setup中使用vue-router问题

    vue3.0 setup中使用vue-router问题

    这篇文章主要介绍了vue3.0 setup中使用vue-router问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 左滑删除功能的示例代码

    vue 左滑删除功能的示例代码

    这篇文章主要介绍了vue 左滑删除功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01

最新评论