记录前端excel导入并展示

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

最近有一个需求关于银行帐单excel导入解析，并生成相应的模板，以便后续直接输入

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备工作？

使用vue,sheetJs,elmengt-ui组件库

二、使用步骤

1.引入库

代码如下（示例）：

## 1.下载sheetjs

代码如下（示例）：
npm install xlsx
或者
yarn add xlsx

下载后引入：
import * as XLSX from "xlsx";

## 2.上传文件
![使用element上传组件](https://i-blog.csdnimg.cn/direct/3d7cb47d63ec484d9557f441bf53ec4c.png)
    <el-upload
              ref="upload"
              :action="uploadUrl"
              accept=".xlsx, .xls, .pdf"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :headers="headers"
              :limit="1"
              directory
            >
      <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>

展示的table:
![这里插入序号会使合并单元格出现问题](https://i-blog.csdnimg.cn/direct/982145daa04b473f87d0cae655c17578.png)

上传成功后将文件保存：
  handleAvatarSuccess(res, file) {
      this.file = file;
      // 其他逻辑
       },
    getExcelDataYS() {
      if (!this.file) {
        this.$message.error("请先上传文件");
        return;
      }
      
  // 然后利用sheetJS提供的api进行格式的提取和数据的提取，这里主要由于我们项目数据是后端返回的，就不用自己拼接了

      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: "array" });
        console.log(workbook,workbook.SheetNames[this.form.sheet], "workbook ");
        const SheetNames = workbook.SheetNames[this.form.sheet];
        // 检查是否有有效的 sheet
        if (!this.form.sheet || !SheetNames) {
          this.$message.error("请选择有效的 sheet 页");
          return;
        }

        const worksheet = workbook.Sheets[SheetNames];
        console.log(workbook, workbook.SheetNames, "worksheet");

        const merges = worksheet["!merges"] || [];
        const mergedCells = {};
        merges.forEach((merge) => {
          const { s: start, e: end } = merge;
          const startCell = XLSX.utils.encode_cell(start);
          const endCell = XLSX.utils.encode_cell(end);
          mergedCells[startCell] = {
            endCell,
            rowspan: end.r - start.r + 1,
            colspan: end.c - start.c + 1,
          };
        });
        this.mergedCells = mergedCells; // 保存合并单元格信息
      };
      reader.readAsArrayBuffer(this.file.raw); // 使用 file.raw 获取 Blob 对象
       // 获取excel数据
      this.getpreviewExcelData();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const startCell = XLSX.utils.encode_cell({ r: rowIndex, c: columnIndex });
      const mergeInfo = this.mergedCells[startCell];
      console.log(mergeInfo, "mergeInfo");

      if (mergeInfo) {
        return {
          rowspan: mergeInfo.rowspan,
          colspan: mergeInfo.colspan,
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },

![展示内容大致是这样，主要是保留合并单元格样式](https://i-blog.csdnimg.cn/direct/d883e6f3ff834825ad1dc2bf2e0b3a9d.png)
![excel包含的类容](https://i-blog.csdnimg.cn/direct/6154b1a8bf9f4afb963eefda86c8a841.png)
![后端返回的table表头，如果后端不做可以自己组装](https://i-blog.csdnimg.cn/direct/2733f366035847e69cb3811721b65686.png)
![后端返回的数据格式](https://i-blog.csdnimg.cn/direct/7611b0de744648b4adafe7c8237d9310.png)


# 总结
对于前端excel导入并展示，首先要明确导入的excel是否是固定样式或者像我这样按照原样展示的，根据导入的文件file，获取其内部的格式信息，主要是合并单元格的展示，sheetJs提供的解析数据里面都有，然后根据样式数据做出合并单元格的操作利用element-ui的table组件提供的span-method进行操作，最后渲染table