import{_ as i,o as a,c as t,a2 as n}from"./chunks/framework.B-QBKwc1.js";const g=JSON.parse('{"title":"Excel 导入导出组件","description":"本节介绍前端项目中的 Excel 导入导出组件，包括导入组件（ImportExcel）和导出功能（Export2Excel）的使用方法。","frontmatter":{},"headers":[],"relativePath":"zh/frontend/excel-components.md","filePath":"zh/frontend/excel-components.md"}'),h={name:"zh/frontend/excel-components.md"};function l(k,s,p,e,F,r){return a(),t("div",null,[...s[0]||(s[0]=[n(`

9.11 Excel 导入导出组件 ​

概述

本节介绍前端项目中的 Excel 导入导出组件，包括导入组件（ImportExcel）和导出功能（Export2Excel）的使用方法。

导入组件 ​

vue
<template>
  <el-button @click="handleImport">导入</el-button>
  <ImportExcel @success="onImportSuccess" />
</template>

<script setup>
import ImportExcel from '@/components/Excel/src/ImportExcel.vue';

const onImportSuccess = (data) => {
  // data 为解析后的数组，每项是对象
  console.log(data);
};
</script>

导出功能 ​

typescript
import { jsonToSheetXlsx } from '@/components/Excel/src/Export2Excel';

const handleExport = () => {
  jsonToSheetXlsx({
    data: tableData.value,
    header: {
      name: '名称',
      typeText: '类型',
      statusText: '状态',
      createTime: '创建时间',
    },
    filename: '导出数据.xlsx',
  });
};

后端导出对接 ​

typescript
// 调用后端导出接口，返回文件 URL
const handleExport = async () => {
  const url = await exampleExport(searchParams.value);
  // 下载文件
  window.open(url);
};

导入模板下载 ​

typescript
// 下载导入模板
const handleDownloadTemplate = async () => {
  const url = await exampleExportTemplate();
  window.open(url);
};

导入导出注意事项 ​

场景说明
大数据量导出后端自动分批导出，避免内存溢出
导入模板第一行为表头，第二行起为数据
字段映射后端 headerMap 配置表头与字段的对应关系
枚举翻译导入时自动将文本转为枚举值，导出时自动将枚举值转为文本

相关文档 ​

`,14)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};