文章目录
js工具之json转excel
html+js实现json数据转为excel，支持json数组转换，无差别json对象转换
应用场景
爬虫，网页数据抓取出来的数据大多为json格式，而且无效字段特别多，基于此，本人手撸了个json转为excel的js工具，提供给大家使用，当然网上也有许多类似的工具。比如我们遇到这样的json时：
{
"6": {
"mcId": 536839,
"isSpecialItem": 0,
"itemClassId": "9",
"itemClassOfflineId": "233",
"itemClassName": null,
"itemId": "6",
"itemUnitList": [
{
"mcId": 536839,
"itemId": "6",
"unId": "-1",
"unName": "份",
"unPicFile": null,
"unSmallPicFile": null
}
],
"itemLabel": "",
"dinnerMode": null,
"limitQuantityFlg": 0,
"limitQuantity": null,
"unId": "-1"
},
"7": {
"mcId": 536839,
"isSpecialItem": 0,
"itemClassId": "9",
"itemClassOfflineId": "19418400000000011",
"itemClassName": null,
"itemUnitList": [
{
"mcId": 536839,
"itemId": "7",
"unId": "-1",
"unName": "份",
"isSale": 1
}
],
"itemLabel": "",
"dinnerMode": null,
"limitQuantityFlg": 0,
"limitQuantity": null,
"unId": "-1"
}
}
简直无法解析出结果，而且目前线上的必须基于数据，非常麻烦。
提示：以下是本篇文章正文内容
一、本工具能干什么？
1、纯html+js写的，无需下载，线上化操作。
2、支持多种json结构,提供字段提取模式和传统数组转换模式可以选择，字段提取模式无需你的json需要有规范的格式要求都可转换为excel
3、体验链接
4、使用效果截图
无脑模式
那输出窗的内容复制到excel
数组模式
二、源码
用最简洁的方式写工具，上菜上菜
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>json在线转excel</title>
<script src="../static/js/vue.min.js"></script>
</head>
<body>
<div id="app" style="width: 100%">
<div style="display: flex;line-height: 40px;">
<p style="width: 80px">模式：</p>
<div style="width: 200px">
<input type="radio" style=" height: 20px;width: 20px" :value="0" v-model="mode">
<label :for="0">无脑模式</label><br>
<input type="radio" style=" height: 20px;width: 20px" :value="1" name="fruit" v-model="mode">
<label :for="1">json数组提取</label><br>
</div>
<div style="width: 100%;display: inline-flex">
<div style="width: 1200px;height: 100px;" v-if="!mode">
<span style="color: red">****很重要！！！这里粘贴你的json数据</span>
<textarea style="width: 100%" name="" placeholder="请输入字段,用竖线(|)隔开，例如：name|title|img" v-model="fields" cols="30" rows="2"></textarea>
</div>
<button @click="json2Excel">提 取</button>
</div>
</div>
<div style="display: flex">
<div style="width: 500px;height: 800px; ">
<span style="color: red">****很重要！！！这里粘贴你的json数据</span>
<textarea placeholder='请张贴json数据，如:[{"a":1,"b":2},{"a":1,"b":2},{"a":1,"b":2}]' style="width: 100%" name="" v-model="str" cols="30" rows="80"></textarea>
</div>
<div style="width: 1000px;">
<span style="color: red">****很重要！！！完事后复制转换后的结果粘贴到excel即可</span>
<textarea name="" placeholder="数据结果，完事后复制张贴到excel就可形成表格" style="width: 100%" :value="output" cols="30" rows="80"></textarea>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
str:"",
fields:"",
output:"",
mode:0
},
created: function () {
},
methods:{
json2Excel() {
if (this.mode) {
this.arr2Excel()
}else {
this.field2excel()
}
},
field2excel(){
if (!this.fields) {
alert("请输入字段")
return
}
if (!this.str) {
alert("请输入json数据")
return
}
let arr = this.fields.split("|");
if (!arr.length) {
alert("请输入字段")
return;
}
let resultData = []
let maxLen = 0;
for (let i = 0; i < arr.length; i++) {
let field = arr[i].trim();
let regStr = '"'+field+'":\\s{0,}("([^"]+)"|(\\d+))';
let pattern = new RegExp( regStr,"g")
let col = []
let colArr = []
while (col = pattern.exec(this.str)) {
if (col && col.length) {
colArr.push(col[2]);
}
}
resultData.push(colArr)
maxLen = Math.max(maxLen, colArr.length )
}
let result = [];
result.push(arr.join('\t'))
for (let j = 0; j < maxLen; j++) {
let row = []
for (let i = 0; i < arr.length; i++) {
row.push(resultData[i][j]);
}
result.push(row.join('\t'))
}
this.output = result.join('\n')
},
arr2Excel(){
let arr = eval(this.str);
if (!arr || !Array.isArray(arr) || !arr.length) {
alert("无效的json数组")
return
}
let result = [];
let keys = Object.keys(arr[0]);
result.push(keys.join("\t"))
for (let i = 0; i < arr.length; i++) {
let vals = Object.values(arr[i]);
result.push(vals.join("\t"))
}
this.output = result.join('\n')
},
getClipboardData:async function () {
}
}
})
</script>
</body>
</html>
2.如果你没有vue.min.js
总结
天天做项目给人家做数字转型、降本增效，我们也要给自己提提效率（偷偷懒），代码拿走，点赞留下，谢谢大家！