vue 读取xml文件

1.项目需求，后台响应的是xml文件，故在前端先做测试，解析本地xml文件

test.xml

<?xml version="1.0" encoding="UTF-8"?>

<root>

<lbs>

<lb>

<label>合同编号</label>

<text>123456</text>

</lb>

<lb>

<label>合同名称</label>

<text>租赁合同</text>

</lb>

<lb>

<label>起始时间</label>

<text>2019-12-27</text>

</lb>

<lb>

<label>截止时间</label>

<text>2020-12-26</text>

</lb>

</lbs>

<table>

<thead>

<tr>

<th>收费项目</th>

<th>计费方式</th>

<th>价格</th>

<th>读数</th>

</tr>

</thead>

<tbody>

<tr>

<td>租金</td>

<td>一口价</td>

<td>5000</td>

<td>

<text>1</text>

<edit>Y</edit>

</td>

</tr>

<tr>

<td>水费</td>

<td>单价*用量</td>

<td>7</td>

<td>2</td>

</tr>

<tr>

<td>电费</td>

<td>单价*用量</td>

<td>7</td>

<td>3</td>

</tr>

</tbody>

</table>

</root>

2.读取文件

created(){

this.file = this.readXML('../../../static/test.xml')

// this.readXml('../../../static/test.xml')

},

readXML(filePath) {

// 创建一个新的xhr对象

let xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest()

} else {// IE

xhr = new ActiveXObject('Microsoft.XMLHTTP')

}

xhr.open('GET', filePath, false);

xhr.overrideMimeType('text/html;charset=utf-8');

xhr.send(null);

console.log(xhr.responseText.replace(/\s*/g,""))

let div = document.createElement("div");

if(typeof xhr.responseText === "string")div.innerHTML = xhr.responseText.replace(/\s*/g,"");

console.log(div.childNodes)

this.htmlDeal(div.childNodes[1].childNodes)

},

上面对文件去除了所有空格或者空白符 ：console.log(xhr.responseText.replace(/\s*/g,""))

附赠别人整理的js字符串去除空格：https://www.cnblogs.com/a-cat/p/8872498.html

3.解析文件

固定写死的写法，获取文件内容，组装成所需要的数据，然后v-for遍历渲染

htmlDeal(data){

data.forEach(item=>{

// console.dir(item)

if(item.nodeName === "LBS"){

let list = [];

item.childNodes.forEach(item1 =>{

let obj = {};

if(item1.nodeName === "LB"){

item1.childNodes.forEach(item2=>{

if(item2.nodeName === "LABEL"){

obj.label = item2.textContent;

}else if(item2.nodeName === "TEXT"){

obj.value = item2.textContent;

}

})

}

list.push(obj);

});

this.titleList = list;

}

else if(item.nodeName === "TABLE"){

let list = [];

item.childNodes.forEach(item1 =>{

let obj = {};

if(item1.nodeName === "THEAD"){

item1.childNodes.forEach(item2 =>{

let aaa = [];

if(item2.nodeName === "TR"){

item2.childNodes.forEach((item3,index3) =>{

let obj1 = {};

if(item3.nodeName === "TH"){

obj1.value = item3.textContent;

}

aaa.push(obj1)

});

}

obj.head = aaa;

list.push(obj);

})

}else if(item1.nodeName === "TBODY"){

let bbb = [];

item1.childNodes.forEach(item2 =>{

if(item2.nodeName === "TR"){

let ccc = [];

item2.childNodes.forEach((item3,index3) =>{

let obj2 = {};

if(item3.nodeName === "TD"){

console.log(item3.childNodes.length)

if(item3.childNodes && item3.childNodes.length > 1){

item3.childNodes.forEach(item4=>{

if(item4.nodeName === "TEXT")obj2.value = item4.textContent;

else if(item4.nodeName === "EDIT")obj2.edit = item4.textContent;

})

}else {

obj2.value = item3.textContent;

}

}

ccc.push(obj2)

});

bbb.push(ccc)

}

});

obj.body = bbb;

list.push(obj);

console.log(list)

this.tableList = list;

}

})

}

})

},

版权声明：本文为CSDN博主「Javacssjsp」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/cscscssjsp/article/details/103735184