【干货满满】一个不使用任何三方库、仅借助JS和浏览器来解析excel表格的方法
有些时候我们需要把excel中的表格数据转换为JSON数据(或其它格式)，然后供程序使用。这里提供一个简易的方案，基本上没用到什么依赖。
方案包含了一些干货知识，这里一一列出。
【干货一】将Chrome浏览器变成文本编辑器
在浏览器地址栏中键入 data:text/html, <html contenteditable> 并回车。你发现了什么？
不仅仅是一个空白的窗口，你还可以在里边打字。
【干货二】复制excel中的表格，粘贴到上面打开的编辑窗口中。我们可以得到一个网页版的表格。
excel中的表格:
复制并粘贴到浏览器编辑窗口中的表格:
【干货三】粘贴到浏览器窗口中的表格，其实是一段完整的html文档。因此，我们可以使用熟悉的DOM接口来操纵它。
【干货四】Chrome支持我们在开发工具里用JS写程序。
有了以上知识支撑，我们只需要在开发工具下写一小段JS，解析表格DOM，将数据转换为JSON，目的就能达成。
参考代码(可忽略，但如果你对DOM编程感兴趣，可以研究一下):
var levels = ['thin', 'normal', 'fat', 'overweight'];
[...document.querySelectorAll('tbody>tr')].slice(5).map(v => [...v.cells].map(text)).filter(v => v[0]).map(v => {
const [min, max, ...rest] = v;
return {
height: {
min: +min,
max: +max
},
weights: levelize(rest)
}
})
function text(e) {
return e.textContent.trim();
}
function chunk(arr, size) {
return Array.from({
length: Math.ceil(arr.length / size)
}, (_, i) => arr.slice(i * size, i * size + size));
}
function levelize(arr) {
return chunk(arr, 2).reduce((p, [min, max], i) => {
p[levels[i]] = {
min: +min,
max: +max || 10000
};
return p;
}, {})
}
运行上述代码后，终端显示如下信息:
可以看到，终端出现一个长度为6的数组，刚好对应我们的6行数据；每个元素中含有身高以及体重范围。
怎么把这个数组复制为JSON呢？？？
【干货五】开发工具下脚本返回的最后一个变量，可以用 $_ 代替；同时，开发工具提供了一个 copy() 函数，用于复制变量为JSON。
最终，对于开头的excel表格，我们得到了如下想要的数据：
[
{
"height": {
"min": 76,
"max": 76.9
},
"weights": {
"thin": {
"min": 0,
"max": 9.3
},
"normal": {
"min": 9.4,
"max": 11.7
},
"fat": {
"min": 11.8,
"max": 12.4
},
"overweight": {
"min": 12.5,
"max": 10000
}
}
},
{
"height": {
"min": 77,
"max": 77.9
},
"weights": {
"thin": {
"min": 0,
"max": 9.5
},
"normal": {
"min": 9.6,
"max": 11.8
},
"fat": {
"min": 11.9,
"max": 12.5
},
"overweight": {
"min": 12.6,
"max": 10000
}
}
},
... 省略
]
【最后一个干货】我们还可以在开发工具下使用快捷键 cmd + p ，来定位已有的js脚本并运行。
其实Chrome还有很多的技巧，自己耐心去挖掘吧！
相关推荐：