Как преобразовать данные JSON в данные формата XML и загрузить файл в React JS

Пакет, который вы нашли, на самом деле является решением вашей проблемы (я действительно использовал его сам, и я могу подтвердить, что это приятно). По сути, все, что вам нужно сделать, это вызвать функцию exportFromJSON с правильными аргументами, и загрузка начнется:

Образец данных

  const dataForXml = [
    {
      "Name": "aaaaa",
      "Author": "aaaaaaaa",
      "Subject": "History",
      "Publication Date": 1981,
      "additional data": {
        "rating": 9.9,
        "opinion": "Nice to have"
      }
    },
    {
      "Name": "L'Ancien Régime et la Révolution",
      "Author": "Alexis de Tocqueville",
      "Subject": "History",
      "Publication Date": 1866
    },
    {
      "Name": "A Brief History of Time",
      "Author": "Stephen Hawking",
      "Subject": "Cosmology",
      "Publication Date": 1988
    },
    {
      "Name": "ooooo",
      "Author": "ooooooooo",
      "Subject": "Novel",
      "Publication Date": 1995
    }
  ];

Настройка используемых полей и их тегов в файле:

  const fieldsAsObjects = {
    "Name": "Name column header",
    "Author": "Author column header",
    "Subject": "Subject column header",
    "Publication Date": "Publication Date column header",
    "additional data": "additional data column header"
  };

Это сопоставление позволяет вам изменять теги в файле. Имена полей соответствуют именам полей в данных, а значения будут использоваться в качестве тегов, соединенных дефисом, например <additional-data-column-header>.

В качестве альтернативы вы можете просто выбрать поля, которые должны быть включены в файл:

  const fieldsAsStrings = [
    "Name",
    "Author",
    "Subject",
    "Publication Date",
    "additional data"
  ];

И вот закрытие; как это использовать:

import React from "react";

import Button         from "@material-ui/core/Button";
import exportFromJSON from "export-from-json";

export default function XMLExport(props) {

  function onClick() {
    const data = props.data;   //dataForXml
    const fileName = props.fileName ? props.fileName : "exported";
    let fields = props.fields ? props.fields : [];  //fieldsAsObjects or fieldsAsStrings, empty list means "use all"
    const exportType = 'xml';
    exportFromJSON({data, fileName, fields, exportType})
  }

  return (
    <Button onClick = {onClick}>
      download
    </Button>
  )

}

Вывод для примера данных:

<?xml version = "1.0" encoding = "utf-8"?><!DOCTYPE base>
<base>
  <element>
    <Name-column-header>
      aaaaa
    </Name-column-header>
    <Author-column-header>
      aaaaaaaa
    </Author-column-header>
    <Subject-column-header>
      History
    </Subject-column-header>
    <Publication-Date-column-header>
      1981
    </Publication-Date-column-header>
    <additional-data-column-header>
      <rating>
        9.9
      </rating>
      <opinion>
        Nice to have
      </opinion>
    </additional-data-column-header>
  </element>
  <element>
    <Name-column-header>
      L'Ancien Régime et la Révolution
    </Name-column-header>
    <Author-column-header>
      Alexis de Tocqueville
    </Author-column-header>
    <Subject-column-header>
      History
    </Subject-column-header>
    <Publication-Date-column-header>
      1866
    </Publication-Date-column-header>
  </element>
  <element>
    <Name-column-header>
      A Brief History of Time
    </Name-column-header>
    <Author-column-header>
      Stephen Hawking
    </Author-column-header>
    <Subject-column-header>
      Cosmology
    </Subject-column-header>
    <Publication-Date-column-header>
      1988
    </Publication-Date-column-header>
  </element>
  <element>
    <Name-column-header>
      ooooo
    </Name-column-header>
    <Author-column-header>
      ooooooooo
    </Author-column-header>
    <Subject-column-header>
      Novel
    </Subject-column-header>
    <Publication-Date-column-header>
      1995
    </Publication-Date-column-header>
  </element>
</base>

Я создал эту песочницу песочницу для вас. К сожалению, сама загрузка не работает в песочнице.

Я нашел одно решение без какой-либо библиотеки пакетов npm:

const xmlData = [
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}];

И это будет вашим компонентом; как это использовать:

import React from "react";

export default function XMLExport(props) {

  function convertXML(data, tagName, arrayElementTag = "element", spaces = 0) {
    const tag = tagName
      .replace(/[^_a-zA-Z 0-9:\-\.]/g, "")
      .replace(/^([ 0-9-:\-\.]|(xml))+/i, "")
      .replace(/ +/g, "-");

    const indentSpaces = Array(spaces + 1).join(" ");

    if (data === null || data === undefined) {
      return `${indentSpaces}<${tag} />`;
    }

    const content =
      Object.prototype.toString.call(data) === "[object Array]"
        ? data
            .map((item) =>
              convertXML(item, arrayElementTag, arrayElementTag, spaces + 2)
            )
            .join("\n")
        : typeof data === "object"
        ? Object.keys(data)
            .map((key) => [key, data[key]])
            .map(([key, value]) =>
              convertXML(value, key, arrayElementTag, spaces + 2)
            )
            .join("\n")
        : indentSpaces +
          "  " +
          String(data).replace(/([<>&])/g, (_, $1) => {
            switch ($1) {
              case "<":
                return "&lt;";
              case ">":
                return "&gt;";
              case "&":
                return "&amp;";
              default:
                return "";
            }
          });

    const contentWithWrapper = `${indentSpaces}<${tag}>
            ${content}
            ${indentSpaces}</${tag}>`;

    return contentWithWrapper;
  }

  function createXMLData(data) {
    const content = `<?xml version = "1.0" encoding = "utf-8"?><!DOCTYPE root>
    ${convertXML(data, "root")}
    `;

    const dataStr =
      "data:text/application/xml;charset=utf-8," + encodeURIComponent(content);
    let downloadData = document.getElementById("downloadData");
    downloadData.setAttribute("href", dataStr);
    downloadData.setAttribute("download", "xmlData.xml");
    downloadData.click();
  }

  return (
    <>
      <a id = "downloadData" style = {{ display: "none" }}></a>
      <button
        onClick = {() => {
          createXMLData(props.data);
        }}
      >
        download
      </button>
    </>
  );
}

Вывод для данных:

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE root>
 <root>
  <element>
    <color>red</color>
    <value>#f00</value>
  </element>
  <element>
    <color>green</color>
    <value>#0f0</value>
  </element>
  <element>
    <color>blue</color>
    <value>#00f</value>
  </element>
  <element>
    <color>cyan</color>
    <value>#0ff</value>
  </element>
  <element>
    <color>magenta</color>
    <value>#f0f</value>
  </element>
  <element>
    <color>yellow</color>
    <value>#ff0</value>
  </element>
  <element>
    <color>black</color>
    <value>#000</value>
  </element>
</root>