腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

在Vue.js前端頁面中顯示完整JSON格式數(shù)據(jù)的實現(xiàn)方案

更新時間：2025年09月24日 08:37:55 作者：就在呀

這篇文章主要介紹了如何在Vue.js前端頁面中將JSON字符串格式化顯示為可讀的、帶縮進的JSON格式,類似于IDE中的代碼顯示效果,需要的朋友可以參考下

概述

本文檔記錄了如何在Vue.js前端頁面中將JSON字符串格式化顯示為可讀的、帶縮進的JSON格式，類似于IDE中的代碼顯示效果。

問題描述

當(dāng)后端返回的JSON數(shù)據(jù)是字符串格式時，直接在前端顯示會呈現(xiàn)為壓縮的一行文本，不便于閱讀和調(diào)試。我們需要將其格式化為標準的JSON格式，包含適當(dāng)?shù)目s進和換行。

解決方案

1. Vue組件實現(xiàn)

<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 示例JSON字符串（雙重編碼）模擬后端返回的數(shù)據(jù)
let str = '"[{\\"BusinessDate\\":\\"2025-09-11\\",\\"OtherID\\":null,\\"TransOutLines\\":[{\\"ItemInfo\\":{\\"ItemCode\\":\\"109-02-00001\\"},\\"StoreUOMQty\\":1.0000}]}]"';

// 格式化JSON字符串
const formattedJson = computed(() => {
  try {
    // 處理雙重編碼的JSON字符串
    const parsedString = JSON.parse(str);
    const parsedJson = JSON.parse(parsedString);
    return JSON.stringify(parsedJson, null, 2);
  } catch (error) {
    console.error('JSON解析錯誤:', error);
    return 'JSON格式錯誤';
  }
});
</script>

<style scoped lang="scss">
pre {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: #333;
  margin: 0;
}
</style>

2. 關(guān)鍵技術(shù)點

2.1 雙重JSON解析

// 第一次解析：解析外層字符串
const parsedString = JSON.parse(str);
// 第二次解析：解析內(nèi)層JSON
const parsedJson = JSON.parse(parsedString);

說明：當(dāng)JSON數(shù)據(jù)被雙重編碼時（字符串中包含轉(zhuǎn)義的JSON），需要進行兩次解析。

2.2 JSON格式化

JSON.stringify(parsedJson, null, 2)

參數(shù)說明：

parsedJson: 要格式化的JSON對象
null: 替換函數(shù)（這里不需要）
2: 縮進空格數(shù)

2.3 CSS樣式關(guān)鍵點

pre {
  white-space: pre;           // 保留所有空格和換行符
  font-family: monospace;     // 使用等寬字體
  overflow-x: auto;           // 水平滾動條
  background-color: #f8f8f8;  // 背景色區(qū)分
}

使用場景

API調(diào)試：顯示后端返回的JSON數(shù)據(jù)
數(shù)據(jù)預(yù)覽：在管理后臺展示配置數(shù)據(jù)
日志查看：格式化顯示日志中的JSON信息
開發(fā)調(diào)試：臨時查看復(fù)雜的JSON結(jié)構(gòu)

常見問題及解決方案

問題1：JSON顯示為一行

原因：CSS樣式中缺少 white-space: pre 屬性

解決：確保pre標簽包含正確的CSS樣式

問題2：JSON解析失敗

原因：

JSON字符串格式不正確
需要多次解析（雙重編碼）
特殊字符轉(zhuǎn)義問題

解決：

try {
  // 根據(jù)實際情況調(diào)整解析次數(shù)
  let result = JSON.parse(str);
  if (typeof result === 'string') {
    result = JSON.parse(result);
  }
  return JSON.stringify(result, null, 2);
} catch (error) {
  console.error('解析錯誤:', error);
  return '數(shù)據(jù)格式錯誤';
}

問題3：長JSON內(nèi)容顯示不全

解決：添加滾動條和最大高度限制

pre {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}

總結(jié)

通過合理的JSON解析和CSS樣式設(shè)置，可以在前端頁面中優(yōu)雅地顯示格式化的JSON數(shù)據(jù)。關(guān)鍵點包括：

正確處理JSON字符串的編碼層級
使用 JSON.stringify() 進行格式化
設(shè)置合適的CSS樣式保持格式
添加錯誤處理機制

這種方法簡單有效，適用于大多數(shù)JSON數(shù)據(jù)展示場景。

以上就是在Vue.js前端頁面中顯示完整JSON格式數(shù)據(jù)的實現(xiàn)方案的詳細內(nèi)容，更多關(guān)于Vue前端顯示完整JSON數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线