【vue】vue使用x2js解析xml文件

最新推荐文章于 2026-07-22 14:31:31 发布

原创最新推荐文章于 2026-07-22 14:31:31 发布 · 1.3w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端项目实践

Vue

本文介绍如何在Vue项目中实现XML文件的解析。由于Vue框架内使用jq的get或ajax方法解析XML不适用，作者推荐使用x2js库。详细步骤包括：通过npm安装x2js并在main.js中引入，或者直接下载.js文件在index.html中引入。在使用x2js时需要注意，若XML文件放置在前端，需将其放入public文件夹，以避免404错误。

一、功能需求

实验室的项目需要添加直播功能，获取到直播流网址如下图所示：

这是一个xml网址，需要解析这个xml网址获取到正在直播的rtmp地址，以进行直播展示。

jq使用get或ajax解析xml文件在vue框架里似乎行不通了。搜索发现了x2js插件，用于在XML和JavaScript对象之间进行转换的库。

二、x2js安装配置

可以使用npm安装或者到https://github.com/abdolence/x2js上下载.js代码，

① npm安装，然后在main.js中引用

npm i x2js

import x2js from 'x2js' //xml数据处理插件
Vue.prototype.$x2js = new x2js() //创建x2js对象，挂到vue原型上

//或使用es6语法(直接在组件中require('x2js')):
const x2js = require('x2js')

②下载到.js代码，直接在index.html中引入

<script type='text/javascript' src="xml2json.js"></script>

三、x2js在组件中使用

x2js.xml2js(xml) //xml2js方法，传入xml格式的数据，返回json对象

_getVersion(url) {
      this.loading = true;
      let _self = this;
      this.$ajax.get(`/data/version${url}.xml`).then(function(res) {
        _self.loading = false;
          console.log(res.data);
          /* var x2js = new X2JS();*/
          /* var obj = x2js.xml_str2json(res.data).note;*/
          var jsonObj = _self.$x2js.xml2js(res.data);
          console.log("-----");
          console.log(jsonObj.note);
          _self.tableData = jsonObj.note.specialityList.item;
          _self.changeData = jsonObj.note.changeList.item;
          _self.finishData = jsonObj.note.finishedPunchList.item;
          _self.knownData = jsonObj.note.questionList.item;
          _self.versionDes =  jsonObj.note.name;
          _self.versionDate = jsonObj.note.date;

        })
        .catch(function(err) {
          console.log(err)
          _self.loading = false;
        });
    }

注意：你的xml文件如果是放在前端这边的话，要把文件放到public文件夹当中，否则文件将会报404的错

参考：https://www.jianshu.com/p/184442e86fcd