前端解析excel 文件

最近碰到了这样的需求 ： 把excel表格导入解析，然后把excel表格的数据渲染在页面上

针对这个需求，我写了一个解析excel表格的小demo，希望对大家有所帮助

解析excel 表格需要用到两个插件

1. xlsx  https://www.npmjs.com/package/xlsx

2. vue-papa-parse https://www.npmjs.com/package/vue-papa-parse

3. element-ui  https://element.eleme.cn/#/zh-CN

第一步先下载两个插件：

npm i vue-papa-parse -S

npm i xlsx -S

npm i element-ui -S

 第二步在main.js 引入插件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VuePapaParse from 'vue-papa-parse'
Vue.use(ElementUI)
Vue.use(VuePapaParse)

然后准备工作就做好了，下面是我自己写的解析excel的小demo（vue+Ts）

 ../src/type/tableData 里面的代码是：

export type tableObj = {
    date: string,
    name: string,
    address: string
}
export const tableInfo =():tableObj=> {
    return {} as tableObj
}
export const tableArr =():tableObj[]=> {
    return []
}

 效果如下：

前端解析excel

excel 表格图：