如何将JSON数据转换为XML格式数据并在React JS中下载文件

import React from 'react';
import { saveAs } from 'file-saver';
import xmlbuilder from 'xmlbuilder';

class JSONtoXMLConverter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      jsonData: {}, // 存储JSON数据
    };
  }

  // 处理JSON数据转换为XML格式数据
  convertToXML = () => {
    const { jsonData } = this.state;
    const xmlRoot = xmlbuilder.create('root'); // 创建XML根节点

    // 递归函数，将JSON数据转换为XML格式数据
    const convertObjectToXML = (obj, parent) => {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const value = obj[key];
          if (typeof value === 'object') {
            const child = parent.ele(key);
            convertObjectToXML(value, child);
          } else {
            parent.ele(key, value);
          }
        }
      }
    };

    convertObjectToXML(jsonData, xmlRoot); // 转换JSON数据为XML格式数据
    const xmlString = xmlRoot.end({ pretty: true }); // 获取XML字符串

    // 创建Blob对象并下载文件
    const blob = new Blob([xmlString], { type: 'text/xml' });
    saveAs(blob, 'data.xml');
  };

  render() {
    return (
      <div>
        {/* JSON数据输入框 */}
        <textarea
          value={JSON.stringify(this.state.jsonData, null, 2)}
          onChange={(e) => this.setState({ jsonData: JSON.parse(e.target.value) })}
        />

        {/* 转换按钮 */}
        <button onClick={this.convertToXML}>转换为XML并下载</button>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <h1>JSON to XML Converter</h1>
      <JSONtoXMLConverter />
    </div>
  );
}

export default App;