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

Question

我正在从我以 JSON 格式获取的 API 中获取数据，我希望这些数据以 XML 格式下载。此功能类似于如果有人单击 UI 上的按钮，xml 文件将与数据一起下载。

我已经搜索了一些解决方案，但无法找到确定的东西。 以下链接可能有用，但不知道如何正确使用它。

https://www.npmjs.com/package/export-from-json

我们将不胜感激。非常感谢。

Answer 1

您找到的那个包实际上是您问题的解决方案(我实际上自己使用过它，我可以确认它很好)。 基本上，您所要做的就是调用 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>

我已经创建了这个沙箱 sandbox为你。不幸的是，下载本身在沙盒中不起作用。