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

Posted 2023-02-22

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

【英文标题】：How to convert JSON data to XML format data and download the file in React JS

【发布时间】：2021-03-21 18:59:57

【问题描述】：

我正在从 API 中获取 JSON 格式的数据，我希望这些数据以 XML 格式下载。这个功能就像任何人点击 UI 上的按钮一样，xml 文件将与数据一起下载。

我已经为此寻找了一些解决方案，但找不到可靠的解决方案。 以下链接可能有用，但不知道如何正确使用它。

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

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

【参考方案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。不幸的是，下载本身在沙盒中不起作用。