其实也挺简单的一个东西,都是一些文件相关的东西,就是我们从本地或者从服务器请求回来的文件,将其用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也是一样的。
这篇先这么点儿东西,我也不知道为啥要写这篇,闲的吧,闲了太久了。。