首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue前端显示完整JSON数据

在Vue.js前端页面中显示完整JSON格式数据的实现方案

2025-09-24 08:37:55 作者：就在呀

这篇文章主要介绍了如何在Vue.js前端页面中将JSON字符串格式化显示为可读的、带缩进的JSON格式,类似于IDE中的代码显示效果,需要的朋友可以参考下

概述

本文档记录了如何在Vue.js前端页面中将JSON字符串格式化显示为可读的、带缩进的JSON格式，类似于IDE中的代码显示效果。

问题描述

当后端返回的JSON数据是字符串格式时，直接在前端显示会呈现为压缩的一行文本，不便于阅读和调试。我们需要将其格式化为标准的JSON格式，包含适当的缩进和换行。

解决方案

1. Vue组件实现

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

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

// 示例JSON字符串（双重编码）模拟后端返回的数据
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. 关键技术点

2.1 双重JSON解析

// 第一次解析：解析外层字符串
const parsedString = JSON.parse(str);
// 第二次解析：解析内层JSON
const parsedJson = JSON.parse(parsedString);

说明：当JSON数据被双重编码时（字符串中包含转义的JSON），需要进行两次解析。

2.2 JSON格式化

JSON.stringify(parsedJson, null, 2)

参数说明：

parsedJson: 要格式化的JSON对象
null: 替换函数（这里不需要）
2: 缩进空格数

2.3 CSS样式关键点

pre {
  white-space: pre;           // 保留所有空格和换行符
  font-family: monospace;     // 使用等宽字体
  overflow-x: auto;           // 水平滚动条
  background-color: #f8f8f8;  // 背景色区分
}

使用场景

API调试：显示后端返回的JSON数据
数据预览：在管理后台展示配置数据
日志查看：格式化显示日志中的JSON信息
开发调试：临时查看复杂的JSON结构

常见问题及解决方案

问题1：JSON显示为一行

原因：CSS样式中缺少 white-space: pre 属性

解决：确保pre标签包含正确的CSS样式

问题2：JSON解析失败

原因：

JSON字符串格式不正确
需要多次解析（双重编码）
特殊字符转义问题

解决：

try {
  // 根据实际情况调整解析次数
  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 '数据格式错误';
}

问题3：长JSON内容显示不全

解决：添加滚动条和最大高度限制

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

总结

通过合理的JSON解析和CSS样式设置，可以在前端页面中优雅地显示格式化的JSON数据。关键点包括：

正确处理JSON字符串的编码层级
使用 JSON.stringify() 进行格式化
设置合适的CSS样式保持格式
添加错误处理机制

这种方法简单有效，适用于大多数JSON数据展示场景。

以上就是在Vue.js前端页面中显示完整JSON格式数据的实现方案的详细内容，更多关于Vue前端显示完整JSON数据的资料请关注脚本之家其它相关文章！