【excel解析并展示在table列表】

技术为vue2.x ,UI框架为ant design vue1.x

场景：导入excel并解析展示在table列表

效果图：


使用插件为：

//lodash插件
yarn add lodash@4.17.21
//xlsx插件
yarn add xlsx@0.18.5

以及一个汉字转拼音的vue-py.js文件（用于给字段生成字段英文名）
vue-py.js文件下载

template标签代码

<template>
	<div>
		 <a-upload-dragger
                accept=".xls,.XLS,.xlsx,.XLSX"
                :before-upload="
                  (file) =>
                    beforeUploadFile({ file }, '.xls,.XLS,.xlsx,.XLSX', '2MB', '上传格式不正确，请上传xls或者xlsx格式')
                "
                :fileList="fileList"
                @change="handleChange"
                :customRequest="customRequest"
              >
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">选择或拖拽上传文件,2MB以内</p>
                <p class="ant-upload-hint">请上传.xls,.xlsx标准格式文件</p>
              </a-upload-dragger>
               <a-table
		          :columns="tableExcelCodeColumns"
		          :data-source="tableExcelNewList"
		          bordered
		          :scroll="{ y: 350, x: true }"
		          :pagination="false"
		        >
		          <template v-for="item in tableExcelCodeColumns" :slot="item.dataIndex"
		            ><div v-if="item.key != 'field_name'" :key="item.key" class="templatetitle">
		              <a-tooltip>
		                <template slot="title"> {{ item.name }} </template>
		                <span class="txtOmit">{{ item.name }}</span>
		              </a-tooltip>
		            </div>
		          </template>
        	</a-table>
	</div>
</template>

script标签代码

<script>
import vPinyin from '@/pages/setting/components/vue-py.js'
import Lodash from 'lodash'
import { read, utils, writeFile } from 'xlsx' //execl解析npm包
export default {
	data(){
		return{
			 //导入excel的
     		 fileList: [],
     		 //table excel字段
	        tableExcelCodeColumns: [],
             //给预览页展示的数据，只展示20条
            tableExcelNewList: [],
		}
	},
	methods:{
	    //处理时间用的封装方法
	    dateFilter: function (input) {
	      console.log(input)
	      var d = new Date(input)
	      var year = d.getFullYear()
	      var month = d.getMonth() < 9 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1)
	      var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
	      var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
	      var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes()
	      var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds()
	      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
	    },
		 //上传excel的文件解析
	    customRequest(data) {
	      this.file = data.file
	    },
        //上传Excel
	    handleChange(file) {
	      if (!/\.(xls|XLS|xlsx|XLSX)$/.test(file.file.name.toLowerCase())) {
	        // 格式根据自己需求定义

	        return false
	      }
	      if (file.file.size / 1024 / 1024 > 2) {
	        // this.$message.success('上传文件过大,只允许上传2MB!')
	        // 格式根据自己需求定义
	        return false
	      }
	      var file = file.file // 文件信息
	      const fileReader = new FileReader()
	      fileReader.onload = (e) => {
	        try {
	          if (e.target) {
	          //cellDates: true单元格内存储的为日期时，可以将读取到的值直接转化为Date对象
	            var workbook = read(e.target.result, { type: 'binary', cellDates: true })
	
	            //只读取第一个Sheet
	            if (!workbook.SheetNames.length) {
	              this.$message.error('Excel表格中sheet为空')
	              return false
	            }
	            //只取了excel表中第一个工作表
	            var SheetName = workbook.SheetNames[0]
	            //判断处理日期
	            for (const i in workbook.Sheets[SheetName]) {
	              if (
	                workbook.Sheets[SheetName][i]['v'] !== null &&
	                workbook.Sheets[SheetName][i]['v'] !== undefined &&
	                workbook.Sheets[SheetName][i]['t'] == 'd'
	              ) {
	                workbook.Sheets[SheetName][i]['v'] = this.dateFilter(new Date(workbook.Sheets[SheetName][i]['w']))
	              }
	            }
	            this.sheetName = SheetName
	            var sheetInfos = workbook.Sheets[SheetName]
	            //这里会把重名列自动更名
	            var outdata = utils.sheet_to_json(sheetInfos, {
	              defval: '',//允许显示空值，defval可以为'-',这样空值会显示-
	            })
	            if (!outdata.length) {
	              this.$message.warning('当前Excel无数据')
	              return false
	            }
	
	            var fileColumns = []
	            outdata.forEach((item, index) => {
	              //只预览20行
	              if (index < 20) {
	                var obj = {}
	                const that = this
	                Lodash.forOwn(item, function (value, fieldKey) {
	                  const pinYinfile = vPinyin.chineseToPinYin(fieldKey)
	                  //截取字段名
	                  if (index == 0 && fieldKey.indexOf('__EMPTY') === -1) {
	                    fileColumns.push({
	                      name: fieldKey,
	                      dataIndex: pinYinfile,
	                      key: pinYinfile,
	                      //增加是否导入
	                      isImport: true,
	                      sort: index + 1,
	                      scopedSlots: { title: pinYinfile },
	                      valueType: 0,
	                      width: 120,
	                    })
	                  }
	                  //截取数据
	                  Lodash.set(obj, pinYinfile, value)
	                  //增加序号
	                  Lodash.set(obj, 'field_name', index + 1)
	                })
	                if (JSON.stringify(obj) != '{}' && index <= 20) {
	                  this.tableExcelNewList.push(obj)
	                }
	              }
	            })
	            //添加序号
	            var obj = [
	              {
	                name: '字段名称',
	                typeName: '字段类型',
	                dataIndex: 'field_name',
	                key: 'field_name',
	                scopedSlots: { title: 'field_name' },
	                width: 107,
	                sort: 0,
	              },
	            ]
	            this.tableExcelCodeColumns = Lodash.concat(obj, fileColumns)
	          }
	        } catch (e) {
	          this.$message.error('Excel上传错误:' + e)
	          return false
	        }
	      }
	      fileReader.readAsBinaryString(file.originFileObj)
	    },
	}
}
</script>

注意点：
1.cellDates: true单元格内存储的为日期时，可以将读取到的值直接转化为Date对象
2.可以把日期格式化为yyyy-MM-dd HH-mm-ss

this.dateFilter(new Date(workbook.Sheets[SheetName][i]['w'])) 

3.可以自由控制是否显示空值，以及空值显示的样式

utils.sheet_to_json(sheetInfos, {
	              defval: '',//允许显示空值，defval可以为'-',这样空值会显示-
})

如果需要完整的源码：请点击下载