vue 读取xml文件,记录
1.项目需求,后台响应的是xml文件,故在前端先做测试,解析本地xml文件test.xml<?xml version="1.0" encoding="UTF-8"?><root><lbs><lb><label>合同编号</label><text>123456</te...
·
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;
}
})
}
})
},
在此记录,完结
更多推荐
已为社区贡献13条内容
所有评论(0)