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

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

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

JSON.stringify(parsedJson, null, 2)

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

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 '数据格式错误';
}

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