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 } from "vue";
import { ImpExcel, ExcelData } from "/@/components/Excel";

export default defineComponent({
  components: { ImpExcel },
  setup() {
    function loadDataSuccess(excelDataList: ExcelData[]) {
      console.log(excelDataList);
    }
    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

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

JsonToSheet Type

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

AoAToSheet Type

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