Vben Admin

Excel 组件

excel 导入导出操作

项目中使用到的是 XLSX，具体文档可以参考XLSX 文档

Import

Usage

<template>
  <ImpExcel @success="loadDataSuccess">
    <a-button class="m-3">导入Excel</a-button>
  </ImpExcel>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { ImpExcel, ExcelData } from '/@/components/Excel';
  export default defineComponent({
    components: { ImpExcel },
    setup() {
      function loadDataSuccess(excelDataList: ExcelData[]) {
        tableListRef.value = [];
        console.log(excelDataList);
        for (const excelData of excelDataList) {
          const {
            header,
            results,
            meta: { sheetName },
          } = excelData;
          const columns: BasicColumn[] = [];
          for (const title of header) {
            columns.push({ title, dataIndex: title });
          }
          tableListRef.value.push({ title: sheetName, dataSource: results, columns });
        }
      }
      return {
        loadDataSuccess,
      };
    },
  });
</script>

Events

事件回调参数说明
success(res:ExcelData)=>void导入成功回调
error()=>void导出错误

ExcelData

属性类型默认值说明
header:string[];table 表头
results:T[];table 数据
meta:{ sheetName: string };table title

Export

具体详情可以参考完整版示例

import { jsonToSheetXlsx, aoaToSheetXlsx } from '/@/components/Excel';

数组格式数据导出

import { aoaToSheetXlsx } from '/@/components/Excel';
// 保证data顺序与header一致
aoaToSheetXlsx({
  data: [],
  header: [],
  filename: '二维数组方式导出excel.xlsx',
});

自定义导出格式

import { jsonToSheetXlsx } from '/@/components/Excel';

jsonToSheetXlsx({
  data,
  filename,
  write2excelOpts: {
    // 可以是 xlsx/html/csv/txt
    bookType,
  },
});

json 格式导出

import { jsonToSheetXlsx } from '/@/components/Excel';

jsonToSheetXlsx({
  data,
  filename: '使用key作为默认头部.xlsx',
});

jsonToSheetXlsx({
  data,
  header: {
    id: 'ID',
    name: '姓名',
    age: '年龄',
    no: '编号',
    address: '地址',
    beginTime: '开始时间',
    endTime: '结束时间',
  },
  filename: '自定义头部.xlsx',
  json2sheetOpts: {
    // 指定顺序
    header: ['name', 'id'],
  },
});

Function

方法回调参数返回值说明
jsonToSheetXlsxFunction(JsonToSheet)json 格式数据，导出到 excel
aoaToSheetXlsxFunction(AoAToSheet)数组格式，导出到 excel

JsonToSheet Type

属性类型默认值说明
dataT[]JSON 对象数组
header?:T;表头未设置则取 JSON 对象的 key 作为 header
filename?:stringexcel-list.xlsx导出的文件名
json2sheetOpts?:JSON2SheetOpts调用 XLSX.utils.json_to_sheet 的可选参数
write2excelOpts?:WritingOptions{ bookType: 'xlsx' }调用 XLSX.writeFile 的可选参数，具体参 XLSX 文档

AoAToSheet Type

属性类型默认值说明
dataT[][];二维数组
header?:T;表头 ；未设置则没有表头
filename?:string;excel-list.xlsx导出的文件名
write2excelOpts?:WritingOptions;{ bookType: 'xlsx' }调用 XLSX.writeFile 的可选参数