一、文章引导

二、博主简介

🌏博客首页： 水香木鱼
📌专栏收录：后台管理系统
📑文章摘要：纯前端实现  vue  xlsx依赖  javascript  
💌木鱼寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

三、文章内容

程序的小伙伴们，大家好！木鱼本期为大家带来的是【纯前端实现导入表格功能】，直奔主题 👇 如下 业务代码相关注释，已标注。请移步代码内容区域

①、安装xlsx

需要安装0.15.6 版本的xlsx，否则会出现错误！

npm install xlsx@0.15.6

②、局部导入xlsx

import xlsx from "xlsx"; 

③、展示区域

<template>
  <div>
      <!-- 导入按钮 -->
      <div class="button_group dateBoxTxt">
        <a
          href="javascript:;"
          class="button_s my_file el-button button_s el-button--primary el-button--small"
        >
          <input
            type="file"
            class="my_input"
            @change="importExcel"
            id="upload"
          />导入货运系统实际运量数据
        </a>
      </div>
      <!-- 渲染内容 -->
      <el-table
        :data="dataArr"
        style="width: 95%; margin: 0 auto; margin-top: 5px"
        max-height="100%"
        border
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, i) in tableColumn"
          :key="i"
        >
        </el-table-column>
      </el-table>
  </div>
</template>

④、业务区域

<script>
import xlsx from "xlsx"; //导入表格
export default {
  data() {
    return {
      /*--上传表格配置----*/
      dataArr: [], // 表格内容数据数组
      tableColumn: [], // 表格表头配置数组
    };
  },
  methods: {
    // 获取表格表头
    getHeader(sheet) {
      const XLSX = xlsx;
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); // worksheet['!ref'] 是工作表的有效范围
      let C;
      /* 获取单元格值 start in the first row */
      const R = range.s.r; // 行 // C 列
      let i = 0;
      for (C = range.s.c; C <= range.e.c; ++C) {
        var cell =
          sheet[
            XLSX.utils.encode_cell({ c: C, r: R })
          ]; /* 根据地址得到单元格的值find the cell in the first row */
        var hdr = "UNKNOWN" + C; // 如果有空表头，会替换为您想要的默认值replace with your desired default
        // XLSX.utils.format_cell 生成单元格文本值
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        if (hdr.indexOf("UNKNOWN") > -1) {
          if (!i) {
            hdr = "__EMPTY";
          } else {
            hdr = "__EMPTY_" + i;
          }
          i++;
        }
        headers.push(hdr);
      }
      return headers;
    },
    setTable(headers, excellist) {
      const tableTitleData = []; // 存储表格表头数据
      const tableMapTitle = {}; // 设置表格内容中英文对照用
      headers.forEach((_, i) => {
        tableMapTitle[_] = "prop" + i;
        tableTitleData.push({
          prop: "prop" + i,
          label: _,
          width: 100,
        });
      });
      console.log("tableTitleData", tableTitleData);
      // 映射表格内容属性名为英文
      const newTableData = [];
      excellist.forEach((_) => {
        const newObj = {};
        Object.keys(_).forEach((key) => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      console.log("newTableData", newTableData);
      this.tableColumn = tableTitleData;
      this.dataArr = newTableData;
    },
    // 导入表格
    importExcel(e) {
      const files = e.target.files;
      console.log(files);
      if (!files.length) {
        return;
      } else if (!/\\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return alert("上传格式不正确，请上传xls或者xlsx格式");
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const XLSX = xlsx;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          const wsname = workbook.SheetNames[0]; //取第一张表，wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容，wb.Sheets[Sheet名]获取第一个Sheet的数据
          const excellist = []; //清空接收数据
          //编辑数据
          for (var i = 0; i < ws.length; i++) {
            excellist.push(ws[i]);
          }
          console.log("读取结果", excellist); // 此时得到的是一个内容是对象的数组需要处理
          // 获取表头1-1
          const a = workbook.Sheets[workbook.SheetNames[0]];
          const headers = this.getHeader(a);
          console.log("headers", headers);
          // 获取表头1-2
          // 渲染表格1-1
          this.setTable(headers, excellist);
          // 渲染表格1-2
        } catch (e) {
          return alert("读取失败!");
        }
      };
      fileReader.readAsBinaryString(files[0]);
      var input = document.getElementById("upload");
      input.value = "";
    },
  },
};
</script>

⑤、按钮样式区域

<style lang="less" scoped>
// 按钮样式
.button_group {
  .button_s {
    width: 180px;
    margin: 5px 10px 5px 5px;
  }
  .button_m {
    width: 180px;
    margin: 5px 10px 5px 5px;
  }
  .my_file {
    position: relative;
    .my_input {
      position: absolute;
      opacity: 0;
      width: 180px;
      height: 30px;
      top: 0;
      left: 0;
    }
  }
}
</style>

四、精彩推荐

💡vue时间格式处理(YYYY-MM-DD HH:mm:ss)moment.js，神器你知道吗？
💡vue后台管理做适配的最佳方案，你知道吗
💡前端引入阿里图标库的最便捷方式
💡前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
💡vue如何通过url携带token，并且打开新页面

本篇博客文章模板唯一版权归属©水香木鱼