前端实现导入导出功能操作xlsx

常见于表单提交数据的交互类型

import XLSX from 'xlsx';

导入实现

<el-upload class="upload" action="#" :show-file-list="false" :before-upload="handleFileUpload">
<el-button type="primary" align :disabled="!edit">導入
</el-button>
</el-upload>
handleFileUpload(file) {
  this.uploadLoading = true
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[sheetName];
    const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
    console.log(jsonData)
    if (jsonData && jsonData.length > 0) {
      jsonData.forEach(async (item, index) => {
        if (index > 0) {
          //index 为0 是table的表头
          // 之后才为table的内容数据
        }
          })
        }
      })
    }
  };
  this.uploadLoading = false
  reader.readAsArrayBuffer(file);
  return false;
},

导出实现

<el-button type="primary" @click="handleDownload" :loading="downloadLoading">導出</el-button>
handleDownload() {
  const header = ['序號', '貨號', '品牌'];
  const excelData = [
    header,
    ...this.formInData.map((item, index) => [index + 1, item.originalCode, item.brandName])
  ]
  // 创建工作表
  const worksheet = XLSX.utils.aoa_to_sheet(excelData);

  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  XLSX.writeFile(workbook, 'table_data.xlsx');
},