一.导出xml文件

1.处理函数：

//导出xml的表头
let allColumns=[
  {
   title:"名字"，
   key："name"
  },
  {
   title:"性别"，
   key："sex"
  },
  {
   title:"年龄"，
   key："age"
  },
  {
   title:"身高"，
   key："height"
  },
];

//需要导出的xml数据
let exportData=[
  {
    name:"001",
    sex:"男",
    age:"23",
    height:"178cm"
  },
  {
    name:"002",
    sex:"女",
    age:"25",
    height:"165cm"
  },
]
//注意表头中的key要与数据中的键名对应

//导出xml文件的名称
let fileName="people_table";

// 导出xml格式
function exportXml(columns, dataList, fileName) {
  let str = '<?xml version="1.0" encoding="utf-8" ?>\n<dataSource>\n';
  dataList.forEach(dataItem => {
    str += `<dataItem>\n`;
    columns.forEach(columnsItem => {
      str += `<${columnsItem.key}>${dataItem[columnsItem.key]}</${columnsItem.key}>\n`;
    });
    str += `</dataItem>\n`;
  });
  str += '</dataSource>';
  let downloadLink = document.createElement('a');
  let uri = window.URL.createObjectURL(new Blob([str], { type: 'text/plain;charset=utf-8,\ufeff' }));
  downloadLink.href = uri;
  downloadLink.download = `${fileName}.xml`;
  downloadLink.click();
  window.URL.revokeObjectURL(uri);
}

//调用导出方法
exportXml(allColumns, exportData,fileName);

2.导出文件打开效果：

1）浏览器打开

2）文本文档打开

二.导入xml文件

1.获取本地xml文件主要代码：

<script setup>

function btnClick() {
  document.getElementById("file1").click();
}

function openFile(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  //读取成功后的处理方法
  reader.onload = function(e) {
    var xmlString= e.target.result;
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlString, "text/xml");
    // 将XML文档转换为JSON对象
    var json = xmlToJson(xmlDoc.documentElement);
    console.log(json);
  }
  //读取文件
  reader.readAsText(file);
}
</script>

<template>
  <button @click="btnClick">Open</button>
  <input id="file1" type="file" style="display:none" @change="openFile">
</template>

2.将xml文件转换成json格式的处理函数：

// 假设有一个XML字符串
var xmlString = `
 <dataSource>
  <dataItem>
    <name>001</name>
    <sex>男</sex>
    <age>23</age>
    <height>178cm</height>
  </dataItem>
  <dataItem>
    <name>002</name>
    <sex>女</sex>
    <age>25</age>
    <height>165cm</height>
  </dataItem>
 </dataSource>`;

// 创建一个DOMParser实例
var parser = new DOMParser();

// 使用DOMParser解析XML字符串
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// 定义一个递归函数来转换XML节点到JSON对象
function xmlToJson(xml) {
    // 创建返回的对象
    var obj = {};
    if (xml.nodeType === 1) { // element
        // 处理属性
        if (xml.attributes.length > 0) {
            obj["@attributes"] = {};
            for (var j = 0; j < xml.attributes.length; j++) {
                var attribute = xml.attributes.item(j);
                obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
            }
        }
    } else if (xml.nodeType === 3) { // text
        obj = xml.nodeValue;
    }

    // 处理子节点
    if (xml.hasChildNodes()) {
        for(var i = 0; i < xml.childNodes.length; i++) {
            var item = xml.childNodes.item(i);
            var nodeName = item.nodeName;
            if (typeof (obj[nodeName]) === "undefined") {
                obj[nodeName] = xmlToJson(item);
            } else {
                if (typeof (obj[nodeName].push) === "undefined") {
                    var old = obj[nodeName];
                    obj[nodeName] = [];
                    obj[nodeName].push(old);
                }
                obj[nodeName].push(xmlToJson(item));
            }
        }
    }
    return obj;
};
// 将XML文档转换为JSON对象
var json = xmlToJson(xmlDoc.documentElement);
console.log(json);