Html将Json对象在页面结构化显示与Json文件生成下载

需要引入bootstrap.css 、jquery.json-viewer.css 、jquery.json-viewer.js

结构化显示的Json

下载后的文件

        Json对象初始化var options = {collapsed: false, // 展开withQuotes: true // Key带引号};$('#json-renderer').jsonViewer({name:'张三' , age:23}, options);Json下载function downloadJson() {// 下载文件方法var eleLink = document.createElement('a');eleLink.download = "person.json"; // 文件名eleLink.style.display = 'none';// 字符内容转变成blob地址var blob = new Blob([$('#json-renderer').text() + "\r\n"]);eleLink.href = URL.createObjectURL(blob);// 触发点击document.body.appendChild(eleLink);eleLink.click();// 然后移除document.body.removeChild(eleLink);}

jquery.json-viewer.js

/*** jQuery json-viewer* @author: Alexandre Bodelot <alexandre.bodelot@gmail.com>*/
(function($){/*** Check if arg is either an array with at least 1 element, or a dict with at least 1 key* @return boolean*/function isCollapsable(arg) {return arg instanceof Object && Object.keys(arg).length > 0;}/*** Check if a string represents a valid url* @return boolean*/function isUrl(string) {var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;return regexp.test(string);}/*** Transform a json object into html representation* @return string*/function json2html(json, options) {var html = '';if (typeof json === 'string') {/* Escape tags */json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');if (isUrl(json))html += '<a href="' + json + '" class="json-string">' + json + '</a>';elsehtml += '<span class="json-string">"' + json + '"</span>';}else if (typeof json === 'number') {html += '<span class="json-literal">' + json + '</span>';}else if (typeof json === 'boolean') {html += '<span class="json-literal">' + json + '</span>';}else if (json === null) {html += '<span class="json-literal">null</span>';}else if (json instanceof Array) {if (json.length > 0) {html += '[<ol class="json-array">';for (var i = 0; i < json.length; ++i) {html += '<li>';/* Add toggle button if item is collapsable */if (isCollapsable(json[i])) {html += '<a href class="json-toggle"></a>';}html += json2html(json[i], options);/* Add comma if item is not last */if (i < json.length - 1) {html += ',';}html += '</li>';}html += '</ol>]';}else {html += '[]';}}else if (typeof json === 'object') {var key_count = Object.keys(json).length;if (key_count > 0) {html += '{<ul class="json-dict">';for (var key in json) {if (json.hasOwnProperty(key)) {html += '<li>';var keyRepr = options.withQuotes ?'<span class="json-string">"' + key + '"</span>' : key;/* Add toggle button if item is collapsable */if (isCollapsable(json[key])) {html += '<a href class="json-toggle">' + keyRepr + '</a>';}else {html += keyRepr;}html += ': ' + json2html(json[key], options);/* Add comma if item is not last */if (--key_count > 0)html += ',';html += '</li>';}}html += '</ul>}';}else {html += '{}';}}return html;}/*** jQuery plugin method* @param json: a javascript object* @param options: an optional options hash*/$.fn.jsonViewer = function(json, options) {options = options || {};/* jQuery chaining */return this.each(function() {/* Transform to HTML */var html = json2html(json, options);if (isCollapsable(json))html = '<a href class="json-toggle"></a>' + html;/* Insert HTML in target DOM element */$(this).html(html);/* Bind click on toggle buttons */$(this).off('click');$(this).on('click', 'a.json-toggle', function() {var target = $(this).toggleClass('collapsed').siblings('ul.json-dict, ol.json-array');target.toggle();if (target.is(':visible')) {target.siblings('.json-placeholder').remove();}else {var count = target.children('li').length;var placeholder = count + (count > 1 ? ' items' : ' item');target.after('<a href class="json-placeholder">' + placeholder + '</a>');}return false;});/* Simulate click on toggle button when placeholder is clicked */$(this).on('click', 'a.json-placeholder', function() {$(this).siblings('a.json-toggle').click();return false;});if (options.collapsed == true) {/* Trigger click to collapse all nodes */$(this).find('a.json-toggle').click();}});};
})(jQuery);

jquery.json-viewer.css

/* Syntax highlighting for JSON objects */
ul.json-dict, ol.json-array {list-style-type: none;margin: 0 0 0 1px;border-left: 1px dotted #ccc;padding-left: 2em;
}
.json-string {color: #0B7500;
}
.json-literal {color: #1A01CC;font-weight: bold;
}/* Toggle button */
a.json-toggle {position: relative;color: inherit;text-decoration: none;
}
a.json-toggle:focus {outline: none;
}
a.json-toggle:before {color: #aaa;content: "\25BC"; /* down arrow */position: absolute;display: inline-block;width: 1em;left: -1em;
}
a.json-toggle.collapsed:before {transform: rotate(-90deg); /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);
}/* Collapsable placeholder links */
a.json-placeholder {color: #aaa;padding: 0 1em;text-decoration: none;
}
a.json-placeholder:hover {text-decoration: underline;
}

Html将Json对象在页面结构化显示与Json文件生成下载相关推荐

移动Web单页应用开发实践——页面结构化
1. 前言在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
RM: 基于页面结构化数据生成报表,一键导出图片,生成定制图表文末有效果图 , 开放部分代码
背景开发这个工具是因为一句抱怨故事是这样的,我们公司是一个非常重视员工健康的公司,一年前老董说让HR(后面改为ZT)督促员工多多运动,可持续地位公司创造价值.并拿出了一部预算来奖励那些积极运动的人 ...
[Json] C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json （转载）...
点击下载 ConvertJson.rar 本类实现了 C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json| 等功能大 ...
JavaWeb(14) 页面静态化之使用freemarker模板生成一个html静态页面
题外话: 页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术从本质上来讲,模板技术是一个占位符动态替换技术.一个完整的模板技术需要四个元素:①模板语言( ...
ajax传递json对象 php,PHP传递通过AJAX传递JSON对象数组到前台，前台解析，遍历JSON...
PHP后台接网易接口 header("Content-Type:text/html;charset=utf-8"); //从文件读取数据 //$json_str =file_get ...
把执行结果转成json对象报错_于一次JSON格式错误之手把手带你走一波FastJSON将对象转成JSON字符串流程...
一.前言最近老大说要新增一个试用广告的功能,我巴拉巴拉的从之前推送广告那里将代码cv过来,然后跟老大说搞定了!过一会老大说返回的json格式不对!于是乎我瞧了瞧: { "adsArea1& ...
网站页面静态化（二）thymeleaf生成
今年是农历大年初三,在这里首先给各位朋友拜个年,祝大家新年快乐,虎年大吉大利,事业蒸蒸日上.过年无事,把页面静态化技术整理整理.本文将以thymeleaf为例子,说明在springboot当中,如何基 ...
tree命令详解（输出目录树层结构，显示目录和文件）
你也想要生成这个目录树层结构吗?显示目录和文件吗?只需要用"tree命令"即可! 效果如下: . ├── README.md ├── auto-imports.d.ts ├── c ...
腾讯对象存储服务COS加密签名上传文件与下载文件的剖析，福利提供给所有使用Android的小伙伴们！
在做一些用户需求的时候,公司往往需要工程师采集到更多有用的关于用户的个人信息,然后对用户群进行分析,今天我不是来分析这些的,今天我主要是说腾讯推出的款云产品,那就是对象存储服务COS,这个产品面向所 ...

Html将Json对象在页面结构化显示与Json文件生成下载

需要引入bootstrap.css 、jquery.json-viewer.css 、jquery.json-viewer.js

Html将Json对象在页面结构化显示与Json文件生成下载相关推荐

最新文章

热门文章