结合elementUI实现excel导入导出

这是前端直接实现导入，导入文件格式为excel，点击导入直接过滤文件格式为excel。

一、首先要下载插件

npm install -S file-saver xlsx

npm install -D script-loader

我使用的是0.18版本，这个根据自身项目可以下载相应的版本，我查资料也有16/17版本。

二、引入插件

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

这里XLSX引用不太一样，也有直接  import  XLSX from "xlsx"; 这个根据需要自行调整。

三、html 

          <input
            ref="excel-upload-input"
            class="excel-upload-input"
            type="file"
            accept=".xlsx, .xls"
            @change="handleClick"
          />
          <div
            class="drop"
            @drop="handleDrop"
            @dragover="handleDragover"
            @dragenter="handleDragover"
          >
            <el-button
              :loading="loading"
              class="eidt"
              size="mini"
              type="primary"
              @click="handleUpload"
              >导入</el-button
            >
          </div>

       <el-table
          id="tableId"
          :data="tableData"
          border
          highlight-current-row
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            v-for="item of tableHeader"
            :key="item"
            :prop="item"
            :label="item"
          />
        </el-table> 

四、script

首先引入插件

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

/**
 * 默认方案页面
 */
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      tableHeader: [],
    };
  },
  mounted() {},
  methods: {
    // 点击导入
    handleDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      if (this.loading) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
        this.$message.error("仅支持单个上传一个文件");
        return;
      }
      const rawFile = files[0]; // 获取文件信息
      if (!this.isExcel(rawFile)) {
        //是不是excel文件
        this.$message.error(
          "Only supports upload .xlsx, .xls, .csv suffix files"
        );
        return false;
      }
      this.upload(rawFile);
      e.stopPropagation();
      e.preventDefault();
    },
    handleDragover(e) {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    },
    handleUpload() {
      this.$refs["excel-upload-input"].click(); //触发表单上传事件，跳出选择文件框
    },
    handleClick(e) {
      // console.log(e);
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      this.upload(rawFile);
    },
    upload(rawFile) {
      this.$refs["excel-upload-input"].value = null; // fix can't select the same excel
      if (!this.beforeUpload) {
        this.readerData(rawFile);
        return;
      }
      const before = this.beforeUpload(rawFile); //判断文件上传大小
      if (before) {
        this.readerData(rawFile); //把excel转化成数组
      }
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1M的文件",
        type: "warning",
      });
      return false;
    },
    readerData(rawFile) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(rawFile);
        //参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现
        reader.onload = (e) => {
          const data = e.target.result;
          console.log(data);
          const workbook = XLSX.read(data, { type: "array" });
          console.log("workbook", workbook);
          //看下图
          const firstSheetName = workbook.SheetNames[0];
          // console.log("firstSheetName",firstSheetName);// "SheetJS" 取出工作表名称
          const worksheet = workbook.Sheets[firstSheetName]; //取出工作表名称对应的表格数据
          const header = this.getHeaderRow(worksheet); //表头名
          // console.log("header",header);
          const results = XLSX.utils.sheet_to_json(worksheet); //输出数据，除去表头
          //{timestamp: "2017-01-01 07:37:20",title: "Mtiwxlj Cqcdg Hvbjijr Vgmeey Wwznq Ljjnkvbz",
          //type: "US",importance: 2,status: "draft"} results的其中一列数据
          this.tableData = results;
          this.tableHeader = header;
          this.loading = false;
          resolve();
        };
      });
    },
    getHeaderRow(sheet) {
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); //!ref: "A1:E21"
      // console.log(range);
      // s: {c: 0, r: 0} 开始为A1
      // e: {c: 4, r: 20} 结束为 E21
      let C;
      const R = range.s.r;
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
        // console.log(cell); A1的对象的值
        /* find the cell in the first row */
        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
        // console.log(XLSX.utils.format_cell(cell));//每个头部名
        headers.push(hdr);
      }
      return headers;
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name);
    },
  },
};
</script>

承接下文：结合elementUI实现excel导出_F N Janine的博客-CSDN博客