vue基于原生html标签导入excel表格及标签的美化

在做一个后台管理系统，使用的naive框架，因此以前用的基于element上传组件的导入excel就不能使用了，特别制作了这一版，做下记录，以后不管是使用什么框架，都可以直接使用。

首先安装插件

npm install --save xlsx file-saver

然后在页面引入

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

安装好后可以在package.json查看是否安装成功，以下代表安装成功

"file-saver": "^2.0.5",
"xlsx": "^0.18.5"

然后自定义html标签

 <label for="upload" class="top">导入表格</label>
        <input
          type="file"
          multiple
          id="upload"
          style="display: none"
          @change="changeExcel($event)"
          accept=".xls,.xlsx"
        />

美化标签样式

<style scoped lang="less">
  .top {
    height: 30px;
    width: 80px;
    background-color: #2080f0;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    margin-right: 20px;
  }
  .top:hover {
    background-color: #4098fc;
  }
</style>

效果：

 最后是js部分点击函数逻辑

const tableData = ref([]); //表格数据
      const dealExcel = (ws) => {
        let keymap = {
          // 转换的开头
          姓名: 'name',
          工资月份: 'month',
          工资总金额: 'money',
          部门: 'section',
          职位: 'job',
        };
        ws.forEach((sourceObj) => {
          Object.keys(sourceObj).map((keys) => {
            let newKey = keymap[keys];
            if (newKey) {
              sourceObj[newKey] = sourceObj[keys];
              delete sourceObj[keys];
            }
          });
        });
        tableData.value = ws;
      };
      const changeExcel = (e) => {
        const files = e.target.files;
        if (files.length <= 0) {
          return false;
        } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
          return false;
        }
        // 读取表格数据
        const fileReader = new FileReader();
        fileReader.onload = (ev) => {
          const workbook = XLSX.read(ev.target.result, {
            type: 'binary',
          });
          const wsname = workbook.SheetNames[0];
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
          // dealExcel(ws);//转换数据格式
          console.log(ws);
          tableData.value = ws; //赋值
          console.log(tableData.value);
        };
        fileReader.readAsBinaryString(files[0]);
      };

dealexcel函数是对excel的表头进行转换，如果标头跟你的标头数据不相符的话。比如你的标头都是英文，而导入的标头是汉语。

我的数据格式是统一的，所以将调用函数注释了。