vue中引入x2js(针对xml数据进行转换处理)

x2js

这是一个在XML和JavaScript对象之间进行转换的库。转换不一定是无损的，但非常方便。(自己体会)

安装配置

• 可以到GitHub主页去下载库代码
  地址 ：https://github.com/abdmob/x2js

• 然后直接在使用的页面引用即可

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

• npm安装

    npm i x2js
  

使用

• 下文介绍npm安装后在vue项目中使用（仅xml转json，其余自己探索）

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

方法一

• 在main.js中引用

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

• 在组件中使用

  var jsonObj = this.$x2js.xml2js('<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soap:Body><ns1:getSDLengthByJMLXResponse xmlns:ns1="http://server.Gw"><ns1:out>&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;NODES&gt;&lt;NODE&gt;&lt;NAME&gt;方沟&lt;/NAME&gt;&lt;VALUE&gt;337.9432807&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;砖混&lt;/NAME&gt;&lt;VALUE&gt;66.8424335&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;盾构&lt;/NAME&gt;&lt;VALUE&gt;14.8955979&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;暗挖&lt;/NAME&gt;&lt;VALUE&gt;48.1186321&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;顶管&lt;/NAME&gt;&lt;VALUE&gt;2.9357091&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;总长度&lt;/NAME&gt;&lt;VALUE&gt;1272.8081174&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;检查井总数&lt;/NAME&gt;&lt;VALUE&gt;94885&lt;/VALUE&gt;&lt;/NODE&gt;&lt;/NODES&gt;</ns1:out></ns1:getSDLengthByJMLXResponse></soap:Body></soap:Envelope>')
    var newjsonObj = this.$x2js.xml2js(jsonObj.Envelope.Body.getSDLengthByJMLXResponse.out.__text)
    for(var i = 0;i<newjsonObj.NODES.NODE.length;i++){
        console.log(newjsonObj.NODES.NODE[i].NAME)
        console.log(newjsonObj.NODES.NODE[i].VALUE)
    }
  

因为这个返回的xml数据是两次嵌套，所以执行了两次xml2js(xml)方法

• 打印结果

打印截图

方法二

• 直接在组件中require()

  const x2js = require('x2js')
  

• 在执行的方法中使用

    var x2jsone = new x2js()
    var jsonObj = x2jsone.xml2js('<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soap:Body><ns1:getSDLengthByJMLXResponse xmlns:ns1="http://server.Gw"><ns1:out>&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;NODES&gt;&lt;NODE&gt;&lt;NAME&gt;方沟&lt;/NAME&gt;&lt;VALUE&gt;337.9432807&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;砖混&lt;/NAME&gt;&lt;VALUE&gt;66.8424335&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;盾构&lt;/NAME&gt;&lt;VALUE&gt;14.8955979&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;暗挖&lt;/NAME&gt;&lt;VALUE&gt;48.1186321&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;顶管&lt;/NAME&gt;&lt;VALUE&gt;2.9357091&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;总长度&lt;/NAME&gt;&lt;VALUE&gt;1272.8081174&lt;/VALUE&gt;&lt;/NODE&gt;&lt;NODE&gt;&lt;NAME&gt;检查井总数&lt;/NAME&gt;&lt;VALUE&gt;94885&lt;/VALUE&gt;&lt;/NODE&gt;&lt;/NODES&gt;</ns1:out></ns1:getSDLengthByJMLXResponse></soap:Body></soap:Envelope>')
    var newjsonObj = x2jsone.xml2js(jsonObj.Envelope.Body.getSDLengthByJMLXResponse.out.__text)
    for(var i = 0;i<newjsonObj.NODES.NODE.length;i++){
        console.log(newjsonObj.NODES.NODE[i].NAME)
        console.log(newjsonObj.NODES.NODE[i].VALUE)
    }
  

• 打印结果（同上）

矫情下

实现的方法有很多，这里只是两种

这里卿洋
愿喜❤️