前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的值

Posted 2022-07-13 咖啡壶子

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

来看一个故事。

前端操作xml，从本地获取xml格式的文件，并且解析xml文件，拿到需要的value值。

首先，需要文件选择，可以自己封装一个组件，当然也可以使用elementUI中的el-upload组件，一切随缘。

我选择了第一种，创建一个FileSelector.vue工具组件。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
       text 
    </el-button>
  </div>
</template>
<script>
export default 
  props: ["text"],
  data() 
    return 
      style: "",
      jsonObj: ,
    ;
  ,
  mounted: function () 
    if (this.text == "添加附件") 
      this.style = "tjfj";
    
  ,
  methods: 
    async handleFileChange(e) 
      if (this.text == "选择文件" && e.target.files[0] != null) 
        this.$emit("input", e.target.files[0]);
       else 
        this.$emit("input", e.target.files);
      
    ,
    oninput() 
      this.$refs["file"].click();
    ,
  ,
;
</sript>
<style>
.tjfj 
  float: right;

</style>

父组件中应用

  <file-selector
        v-model="otherAttachmentList"
        :text="texttype2"
  ></file-selector>

好了，现在file-selector组件已经拿到xml文件，但是要怎样操作才能拿到具体想要的值嘞？

我尝试了很多方法，第一种(网上搜的)，new一个新的DOMParser() 构造函数，新建一个 DOMParser 对象实例，使用parseFromString（）方法，parseFromString（）方法解析包含 html或XML 的字符串。

getXMLNode(parm)
      let str=parm.xmlStr;
      //创建文档对象
      //DOMParser() 构造函数新建一个 DOMParser 对象实例。此对象可用于使用该方法分析文档的文本。
      //parseFromString（）方法解析包含 HTML或XML 的字符串，返回 HTMLDocument或XMLDocument
      let xmlDoc = new DOMParser().parseFromString(str, "text/xml");
      let finds=xmlDoc.getElementsByTagName('find');   //获取find节点
      for (let i=0;i<finds.length;i++)     //循环节点
        let finder = finds[i];
        let nods = finder.childNodes;       
        for (let j=0;j<nods.length;j++)    //循环子节点
          let child = nods[j]
          if (child.nodeType == 1)         //判断是否是标签
            console.log(child.nodeName+":"+child.firstChild.nodeValue)  
            // console.log(child.nodeName+child.innerHTML);   
            //两种方法取值
          
        
      
      return finds
    

网页不允许呀，搜了很多文章（浏览这篇文章https://www.cnblogs.com/DOMLX/p/7822962.html），才知道是因为目前的主流浏览器都不支持解析本地的XML的文件，应该是为了一些安全问题之类的，不能够直接的去解析XML文件。所以这个方法彻底失败。

第二种方法，就是既然能拿到文件，读不出xml文件的内容，那就干脆把他转为文本格式，这样就能直接拿到文本内容，但是拿到文本内容，需要读取里边的值，应该怎样拿到相应的值嘞？

我能想到的是使用正则匹配，还有一种，是下载x2js依赖，然后我使用的是下载依赖，使用这个对象直接将内容转化成json对象，接下来展示，我怕直接放方法有的读者看不懂，所以我直接放代码，有点冗余，见谅。

<template>
  <div>
    <input
      v-if="this.text == '选择文件'"
      type="file"
      ref="file"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <input
      v-else-if="this.text == '添加附件'"
      type="file"
      ref="file"
      multiple="multiple"
      @change="handleFileChange"
      style="filter: alpha(opacity=0); opacity: 0; width: 0; height: 0"
    />
    <el-button @click="oninput" size="mini" :class="style">
       text 
    </el-button>
  </div>
</template>
<script>
export default 
  props: ["text"],
  data() 
    return 
      style: "",
      jsonObj: ,
    ;
  ,
  mounted: function () 
    if (this.text == "添加附件") 
      this.style = "tjfj";
    
  ,
  methods: 
    async handleFileChange(e) 
      if (this.text == "选择文件" && e.target.files[0] != null) 
        await this.getXMLNode(e.target.files[0]);
        this.$emit("input", e.target.files[0]);
       else 
        await this.getXMLNode(e.target.files);
        this.$emit("input", e.target.files);
      
    ,
	// 拿到xml文件，并使用x2js解析该文件拿到相应的值。
    getXMLNode(parm) 
      let reader = new FileReader();
      reader.readAsText(parm[0], "UTF-8");
      let _self = this;
      reader.onload = function () 
          // .annotation.object这个是我文件内容里的东西，根据个人而定。
        this.jsonObj = _self.$x2js.xml2js(this.result).annotation.object;
        // console.log(this.jsonObj);
        // console.log(this.jsonObj["name"]);
        // console.log(this.jsonObj.name);
      ;
    ,
    oninput() 
      this.$refs["file"].click();
    ,
  ,
;
</script>
<style>
.tjfj 
  float: right;

</style>