vue-json-viewer实现JSON格式化效果【高亮、可折叠、可复制】_vue 代码形式完成json格式要求

初学前端，用的架子是 vue+element ，目前有个需求，想将string类型的json字符串，以json格式展示。

利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！

官网地址：https://www.npmjs.com/package/vue-json-viewer

效果展示

先放最终效果：


效果看完，那么我们来上干货了！

安装vue-json-viewer插件

基于npm的安装：

$ npm install vue-json-viewer --save
1

基于yarn的安装：

$ yarn add vue-json-viewer
1

代码实现

在script 里面导入包

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
 
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
// or 
// components: {JsonViewer}
1
2
3
4
5
6
7

在template里面加入如下一种： 其中jsonData必须是json类型的数据。

<json-viewer :value="jsonData"></json-viewer>
 
<hr />
 
<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>
1
2
3
4
5
6
7
8
9
10

然后静态文件和引入都写好后，在script里面，定义jsonData，为它赋值

1、写死的实现：

2、动态赋值实现

// 任务详情
    getJobDetail(index, row) {
      getJobDetail({
        jobName: row.jobName,
        jobGroupName: row.jobGroup
      }).then((res) => {
        this.jsonData = res.data.paramJson
      })
    }
1
2
3
4
5
6
7
8
9

这个方法是，调用任务详情接口，返回一个任务的详情，赋值给this.jsonData。即可实现接口赋值了。

最终。简单的实现方式就完成了！

可选配置说明

<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>
1
2
3
4
5
6

扩展

因为必须是JSON类型的数据才能展示，有些情况得到的是string类型的json数据，那么需要将string类型的json数据转换为json类型。

下面我提供两个方法，供大家参考选用，一个是判断该string类型的数据是否是json；另一个方法是string转json。

判断string是否是json格式的字符串

function isJSON(str) {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }
 
        } catch(e) {
            console.log('error：'+str+'!!!'+e);
            return false;
        }
    }
    console.log('It is not a string!')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

string类型的json字符串，转换为json格式

JSON.parse(str)
1