html用dom显示xml文件,JS,Vue读取xml文件，并展示到界面中

HTML

JS 调用change方法

executorListchange(){

this.readXML();

},

主要代码

这样打印出来是字符串

readXML() {

let that = this

var files = $('#file_executor').prop('files')

var reader = new FileReader();//新建一个FileReader

console.log(files)

reader.readAsText(files[0], "UTF-8");//读取文件

reader.onload = function(evt) { //读取完文件之后会回来这里

var fileString = evt.target.result; // 读取文件内容

console.log(fileString)

var xmlDoc = null;

if (window.DOMParser) {

var parser = new DOMParser();

xmlDoc = parser.parseFromString(fileString, "text/xml");

} else {

//IE

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = "false";

xmlDoc.loadXML(fileString);

}

console.log(xmlDoc);

}

},

打印出为DOM结构并且渲染到页面

readXML() {

let that = this

var files = $('#file_executor').prop('files')

var reader = new FileReader();//新建一个FileReader

reader.readAsText(files[0], "UTF-8");//读取文件

reader.onload = function(evt) { //读取完文件之后会回来这里

var fileString = evt.target.result; // 读取文件内容

var xmlDoc = null;

if (window.DOMParser) {

var parser = new DOMParser();

xmlDoc = parser.parseFromString(fileString, "text/xml");

} else {

//IE

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = "false";

xmlDoc.loadXML(fileString);

}

console.log(xmlDoc);

//转成DOM结构

$(xmlDoc).find("Interfaces").each(function(i)

{

//注意 这个 Interfaces 需要进行替换 是我的xml标签 找你的xml文件规律进行循环 就是正常的DOM操作了

});

}

},