Vue+elementui 纯前端实现Excel导入导出功能(区分表头标题)

引入插件

复制代码
import * as XLSX from "xlsx/xlsx.mjs";
import { read, utils } from 'xlsx/xlsx.mjs';

上传文件方法

复制代码
 // 上传文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
    async handle(ev) {
      //改变表格key值
      this.$refs.cpkTable.loading = true;
      this.$refs.cpkLine.myChart.showLoading({
        text: "加载中...",
        color: "#1890ff",
        textColor: "#1890ff",
        showSpinner: false,
        maskColor: "rgba(255, 255, 255, 0.7)",});
      this.tableKey = true;
      this.file = ev.raw;
      this.excelName = this.file.name;
      //截取表格文件名
      this.excelName = this.excelName.substring(
        0,
        this.excelName.lastIndexOf(".")
      );
      console.log("上传的未解析源文件", this.file);
      if (!this.file) {
        console.log("文件打开失败");
        return;
      } else {
        //<!-- 用来解析表头的代码-->
        // let data = await this.readFile(file);
        // let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据
        // console.log("二进制数据的解析:", workbook);
        // let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
        // // 调用解析表头方法
        // this.getHeader(worksheet);
        // let result = XLSX.utils.sheet_to_json(worksheet); //转换为json数据格式
        // console.log("最终解析的 json 格式数据:", result);
        // this.tableData = result;
        // // 调用处理表头函数
        // this.setTable();
        //<!-- 用来解析表头的代码-->
        // 读取 Excel 文件
        //<!-- 不需要解析表头的代码-->
        const file = this.file;
        const reader = new FileReader();
        const that = this
        reader.onload = function(e) {
          const data = new Uint8Array(e.target.result);
          const workbook = read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const jsonData = utils.sheet_to_json(worksheet, { header: 1, raw: false, defval: '' });
          // const worksheet = workbook.Sheets[workbook.SheetNames[0]];
          // const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
          that.tableData = jsonData
          that.lineData = jsonData
          // 在这里处理读取到的数据
        };
        reader.readAsArrayBuffer(file);
        that.fileOpen = false

        that.$refs.cpkLine.lineData = this.tableData;
        that.LSL = this.form.lsl
        that.MBZ = this.form.targetValue
        that.USL = this.form.usl
        setTimeout(()=>{
          that.$message.success(this.excelName+'导入成功')
          that.$refs.upload.clearFiles();
          that.$refs.cpkTable.loading = false;
          that.$refs.cpkLine.myChart.hideLoading();
        },800)
        // that.tableLength = that.tableData.length
        // this.setTable()
        //<!-- 不需要解析表头的代码-->
      }
    },

解析获取到表头的数据

复制代码
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);
      }
      // 保存至data中
      this.excelHeader = headers;
      return headers;
    },

设置中英文映射 就是字段对应

复制代码
    // 设置表格中英文映射
    setTable() {
      const headers = this.excelHeader;
      const excellist = this.tableData;
      const tableTitleData = []; // 存储表格表头数据
      const tableMapTitle = {}; // 设置表格内容中英文对照用
      headers.forEach((_, i) => {
        tableMapTitle[_] = "cord" + i;
        tableTitleData.push({
          prop: "cord" + i,
          label: _,
          width: 100,
        });
      });
      console.log("表格头标题:", tableTitleData);
      // 映射表格内容属性名为英文
      const newTableData = [];
      excellist.forEach((_) => {
        const newObj = {};
        Object.keys(_).forEach((key) => {
          newObj[tableMapTitle[key]] = _[key];
        });
        newTableData.push(newObj);
      });
      this.tableColumn = tableTitleData;
      this.tableData = newTableData;
    },
相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体