前端解析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）

<template>
  <div id="app">
    <div class="upBox">
        <el-upload
        class="upload-demo"
        accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        action
        :http-request="upexcel"
        :show-file-list="false"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <input type="text" disabled v-model="fileName">
        <el-button size="small" type="danger" @click="clear">清除</el-button>
    </div>
  <el-table
     v-loading="loading"
      :data="tableData"
      stripe
      border
      style="width: 100%; margin:0 auto; marginTop:50px">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <router-view/>
  </div>
</template>

<script lang="ts">
import * as XLSX from 'xlsx'
import {tableInfo, tableArr} from '../src/type/tableData'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      tableData:tableArr(),
      fileName:'',
      loading:false
    }
  },
  methods:{
    upexcel(e: any) {
      let file = e.file
      if(!file) return
      // 把文件按照二进制进行读取
      this.loading = true
      this.fileName = file.name
      let reader = new FileReader();
      reader.readAsBinaryString(file);
		  reader.onload = (ev :any) => {
			let data = ev.target.result
      this.toJosn(data)
		};
    },
    toJosn(data: any) {
      //读取FILE中的数据（变为JSON格式）
      let workbook = XLSX.read(data, { type: "binary" });
      let worksheet = workbook.Sheets[workbook.SheetNames[1]];
      let csv = XLSX.utils.sheet_to_csv(worksheet);
      let order_data = this.$papa.parse(csv)
      let data_value = order_data.data
      setTimeout(this.setData,3000,data_value)
    },
    setData(data_value: any) {
      let arr = []
      for(let i = 1; i<data_value.length; i++) {
        let obj = tableInfo()
         obj.date = data_value[i][0]
         obj.name = data_value[i][1]
         obj.address = data_value[i][2]
         arr.push(obj)
      }
      this.tableData = arr
      this.loading = false
    },
    clear() {
      this.tableData = [];
      this.fileName = '';
      this.loading = false
    }
  }
})
</script>

<style lang="scss">
#app {
  width: 70%;
  user-select: none; //文本不能被选取
  margin: 0 auto;
  .upBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
  input {
      height:32px;
      box-sizing: border-box;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}
</style>

 ../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 表格图：