json to html

在線使用 Node.js 將 JSON 轉換為 HTML。

顯示 JSON(JavaScript Object Notation) 數據於 HTML 格式在建立儀表板、視覺報告或將結構化數據嵌入網頁內容時是必不可少的。與其手動格式化數據，現在您可以使用強大的 GroupDocs.Conversion Cloud SDK 將 JSON 轉換為 HTML，此 SDK 是一個簡化文檔轉換的 REST API。

在本教程中，我們將帶您了解如何使用 Node.js 將 JSON 文件轉換為乾淨且可在瀏覽器中顯示的 HTML 文檔。

📌 快速導航

🚀 為什麼要將 JSON 轉換為 HTML？

HTML 是在網絡上顯示數據的標準格式。通過將 JSON (JavaScript Object Notation) 轉換為 HTML，開發者可以：

  • ✅ 以用户友好的布局呈现结构化数据。
  • ✅ 嵌入 JSON 到網站或網頁應用程式中。
  • ✅ 創建可讀的表格或區塊來處理嵌套的 JSON。
  • ✅ 將 API 響應導出為可讀的 HTML 頁面。

⚙️ 安裝 GroupDocs Node.js SDK

GroupDocs.Conversion Cloud SDK for Node.js 提供了一種輕量級的方法，可以將文件格式轉換集成到基於 JavaScript 的應用程序中。要開始：

  1. 透過 npm 安裝：
npm install groupdocs-conversion-cloud --save
  1. 從 GroupDocs Cloud Dashboard 獲取您的 API 憑證(Client ID 和 Client Secret)。如需更多信息，您可以遵循此 tutorial 中指定的說明。

🛠️ 在 Node.js 中將 JSON 轉換為 HTML

以下是如何使用 GroupDocs.Conversion Cloud SDK 在 Node.js 中將 JSON 文件轉換為 HTML 的方法：

📌 第一步：導入 SDK 並配置 API

const { Configuration, ConvertApi, FileApi, UploadFileRequest, ConvertSettings, ConvertDocumentRequest } = require("groupdocs-conversion-cloud");
const config = new Configuration("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
const convertApi = new ConvertApi(config);
const fileApi = new FileApi(config);

📌 第 2 步：將 JSON 文件上傳到雲端

const fs = require("fs");
const uploadRequest = new UploadFileRequest("input.json", fs.createReadStream("input.json"));
await fileApi.uploadFile(uploadRequest);

📌 第 3 步：設定轉換選項 (JSON → HTML)

const settings = new ConvertSettings();
settings.filePath = "input.json";
settings.format = "html";
settings.outputPath = "converted/output.html";

const request = new ConvertDocumentRequest(settings);
await convertApi.convertDocument(request);
console.log("✅ JSON converted to HTML successfully.");

// More examples over https://github.com/groupdocs-conversion-cloud/groupdocs-conversion-cloud-dotnet
// 獲取您的 API 憑證 
string clientId = "XXXXXX-XXXXXXXXX-4088-9ca0-55c38f4b7f22";
string clientSecret1 = "XXXXXXXXXXXXXXXXXXXX";

// 創建 Configuration 類的實例，並使用 Client ID 和 Client Secret 初始化它
Configuration configuration = new Configuration(clientId, clientSecret);
// 定義 API 基礎 URL 以在線執行 JSON 轉 HTML 轉換
configuration.setApiBaseUrl("https://api.groupdocs.cloud");

// 初始化一個帶有配置對象的 ConvertApi 實例
ConvertApi convertApi = new ConvertApi(configuration);

ConvertSettings settings = new ConvertSettings();
settings.setStorageName("internal");
settings.setFilePath("input.json");
settings.setFormat("HTML");
settings.setOutputPath("myResultant.html");
    
// 使用 ConvertDocument 方法將 JSON 轉換為 HTML 檔案
ConvertDocumentRequest request = new ConvertDocumentRequest(settings);
List<StoredConvertedResult> response = convertApi.convertDocument(request);
    
// 檢查回應並打印成功訊息
if (response != null && response.equals("OK")) {
    System.out.println("Conversion successful! Resultant HTML file is saved at: " + response.getFilePath());
}
json to html

影像:- 透過 Node.js 執行的 JSON 到 HTML 轉換的預覽。

  • The input JSON used in the above example can be downloaded from 這個連結.

💻 將 JSON 轉換為 HTML 通過 cURL

在使用 GroupDocs.Conversion Cloud 的 cURL 命令時，您也可以執行 JSON 到 HTML 的轉換。這種方法不僅簡化了自動化和集成到各種工作流程中，還提供了平台無關、易於編寫腳本的功能，並且允許無縫、高品質的數據轉換，而無需大量編碼。

生成基於客戶端憑據的 JWT 訪問令牌，然後執行以下命令：

curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {YOUR_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"{inputFile}\",  \"Format\": \"html\",  \"OutputPath\": \"{myResultant}\"}"

請將 inputFile 替換為輸入 JSON 檔案的名稱，myResultant 替換為結果 HTML 檔案的名稱，並將 accessToken 替換為個人化的 JWT 存取令牌。

  • 如果要求將生成的 HTML 保存到本地驅動器，您可以考慮執行以下命令：
curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {accessToken}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"input.json\",  \"Format\": \"html\"}"

✅ 結論

使用 GroupDocs.Conversion Cloud SDK for Node.js 將 JSON 轉換為 HTML 可以幫助開發人員從結構化數據生成動態、可讀且易於展示的網頁內容。無論您是在構建管理儀表板、自動化報告，還是處理 JSON API 響應，這個 SDK 都以乾淨的 HTML 輸出簡化了該過程。

📚 有用的資源

🌐 免費 JSON 到 HTML 在線應用程式

要在網頁瀏覽器中體驗驚人的功能 GroupDocs.Conversion Cloud，您可以考慮使用我們免費且輕量的 JSON to HTML Conversion App。

json to html converter

🔗 相關文章

我們建議訪問以下鏈接以了解更多信息：