我是一个实用主义者，喜欢使用工具来提升效率。
背景
在业务需求分析阶段，拿到了一个xlxs电子表格，其中的数据有两列，一列是id，一列是对应的数据，数据的特点是一个大JSON数组，在电子表格中展示非常糟糕，一方面是不能格式化，再就是展示也不全。
因此，就想到能不能将这些数据，在网页中展示出来，毕竟，前端组件库中展示JSON的组件就比较多了。
方案
步骤
- 解析xlxs文件
- 展示id和JSON数组格式化
技术方案
- sheetjs 解析xlxs；
- jsoneditor 格式化JSON；
display:flex进行左右布局；- VSCode的
Live Server插件起本地服务；
sheetjs解析xlxs
sheetjs是一个非常资深的电子表格处理工具，号称是经得起考验的开源解决方案，能够从各种复杂的电子表格中提取有用的数据。下面直接上示例代码:
/**
* xlxs文件处理函数
*/
async function handleFileAsync(e) {
const file = e.target.files[0];
const data = await file.arrayBuffer();
/* 数据是一个 ArrayBuffer 对象 */
const workbook = XLSX.read(data);
let sheetData = []
/* 处理sheet中的数据 */
for (const sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 利用 sheet_to_json 方法将 excel 转成 json 数据
sheetData = sheetData.concat(
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
// break; // 如果只取第一张表，就取消注释这行
}
}
console.log(sheetData);
}
// <input type="file" id="input_dom_element">
// 增加一个change事件，来调用处理xlsx的方法 handleFileAsync
input_dom_element.addEventListener("change", handleFileAsync, false);
这里得到的sheetData是一个对象数组，其中每个对象，就对应了表格中的一行，key是列标题，value是对应单元格数据。类似下图：
flex简单布局
感谢flex，现在可以简单的用几行代码就可以实现一个左侧固定宽度，右侧自适应的布局。
.container {
display: flex;
}
.left {
width: 200px;
height: calc(100vh - 50px);
overflow: scroll;
}
.content {
flex: 1;
height: calc(100vh - 50px);
}
使用了calc和vh方案，来计算一个高度，也是非常方便，防止数据过多，导致页面太长。
jsoneditor展示JSON数组
jsoneditor也是一个很强大的工具，支持展示、编辑、格式化和校验JSON数据。这里插一句，我选择开源组件的方法，一个是要满足初始需求，第二个是用户量（star），第三个是否方便扩展。直接上代码：
let editor = null;
function buildJSONEditor(objJson) {
if (editor) {
editor.destroy() // 每次销毁后重新构建，其实可以直接更新数据的
}
const container = document.getElementById("jsoneditor")
const options = {
mode: 'tree', // 展示模式，还支持text、preview和form等
}
editor = new JSONEditor(container, options)
editor.set(objJson) // 更新展示的JSON数据
editor.expandAll(); // 展开所有节点
}
结论
最终，完成后的这个小工具，可以方便的切换不同的JSON数据，然后去分析对应数据的特点，简单易用，代码量也很小。
