如何將 JSON 數據轉換為 XML 格式數據並在 React JS 中下載文件

Question

我正在從 API 獲取數據，我以 JSON 格式獲取數據，我希望這些數據以 XML 格式下載。 如果有人單擊 UI 上的按鈕，此功能將與 xml 文件一起下載數據。

我已經為此尋找了一些解決方案，但找不到可靠的解決方案。 以下鏈接可能有用，但不知道如何正確使用它。

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

倡議將不勝感激。 非常感謝。

Answer 1

您找到的 package 實際上是您問題的解決方案（我實際上自己使用過它，我可以確認它很好）。 基本上，您所要做的就是使用正確的 arguments 調用exportFromJSON function，然后下載將開始：

樣本數據

  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>
  )

}

Output 為樣本數據：

<?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>

我為您創建了這個沙盒沙盒。 不幸的是，下載本身在沙箱中不起作用。