【干货满满】一个不使用任何三方库、仅借助JS和浏览器来解析excel表格的方法

背井 2021-03-03

997

有些时候我们需要把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还有很多的技巧，自己耐心去挖掘吧！

【干货满满】一个不使用任何三方库、仅借助JS和浏览器来解析excel表格的方法

评论