Excel表格转为json数据及html

其实也挺简单的一个东西，都是一些文件相关的东西，就是我们从本地或者从服务器请求回来的文件，将其用json数据展示或者直接转为dom元素进行展示，下面介绍一下

需要用到xlsx库，所以首先用自己喜欢的工具包安装一下

pnpm add xlsx

然后按需引入自己需要的 

import { read, utils } from 'xlsx'

然后拿到文件进行转化 

因为前端本地自己测试，就从本地选择一个文件吧。 以原生的<input type="file" > 为例

input.addEventListener('input', e => {
  const fileBlob = e.target.files[0]
  fileBlob.arrayBuffer().then(buffer => {
    const wb = read(buffer)
    const Sheets = wb.Sheets // 一个Excel中可能有很多张sheet，这里获取的所有的，是在一个对象中的
    Object.keys(Sheets).forEach((sheet, index) => {
      // 这是每张sheet对应的json数据
      const curData = utils.sheet_to_json(Sheets[sheet])
      console.log(curData)
      // 这是每张sheet对应的html
      const curHtml = utils.sheet_to_html(Sheets[sheet])
      if(index == 2) {
        // 渲染看一下 就是原声的table 可以自由设置样式
        document.querySelector('.html').innerHTML = curHtml
      }
    })
  })
})

一般文件这种拿到的都是Blob对象，不能直接对其进行操作，需要转为arrayBuffer。其实从后端获取过来也是一样的，设置了responseType值为blob拿到的和上面的fileBlob也是一样的。

这篇先这么点儿东西，我也不知道为啥要写这篇，闲的吧，闲了太久了。。