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

一、功能需求

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

这是一个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中引入

三、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