前端校验xml格式及解析xml

1.根据编辑器xml内容，获取xml内容

2.解析格式如图：

方案：

1. 安装依赖

   首先安装必要的 XML 处理库：

   链接: https://github.com/NaturalIntelligence/fast-xml-parser#readme

   npm install fast-xml-parser validator
   

2. 创建 XML 工具函数

   创建一个 xmlUtils.ts 文件：

   import { XMLValidator, XMLParser } from 'fast-xml-parser';
   /**
   * 验证XML字符串是否格式正确
   * @param xmlString XML字符串
   * @returns 验证结果和错误信息
   */
   export function validateXML(xmlString: string): { isValid: boolean; error?: string } { 
    	// 基本输入验证
    	 if (!xmlString || !validator.isLength(xmlString, { min: 1 })) { 
    		 return { isValid: false, error: 'XML字符串为空' };
    	 }
       // 使用fast-xml-parser验证XML格式
    	const validationResult = XMLValidator.validate(xmlString);
       if (validationResult !== true) { 
           return {
   		  isValid: false,
   		  error: `XML格式错误: ${validationResult.err.msg} (行 ${validationResult.err.line}, 列${validationResult.err.col})`,
   	 };
       }
       return { isValid: true };
   }
   /**
   * 解析XML字符串为JavaScript对象
   * @param xmlString XML字符串
   * @returns 解析后的对象
   */
   export function parseXML(xmlString: string): T {
    	 const { isValid, error } = validateXML(xmlString);
   	 if (!isValid) { 
   		 throw new Error(`XML解析失败: ${error}`);
   	 }
   	  const options = {
   	    ignoreAttributes: false,
   	    attributeNamePrefix: '@_',
   	    allowBooleanAttributes: true,
   	    parseNodeValue: true,
   	    parseAttributeValue: true,
   	    trimValues: true,
   	 };
   	 const parser = new XMLParser(options);
   	 return parser.parse(xmlString);
   }
   

3. 在 Vue 组件中使用，首先调用validateXML校验方法，通过校验则调用解析parseXML方法即可。