# Excel 組件 excel 導入導出操作 項目中使用到的是 XLSX，具體文檔可以參考[XLSX 文檔](https://sheetjs.com/) ## Import ### Usage ```vue <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 具體詳情可以參考完整版示例 ```ts import { jsonToSheetXlsx, aoaToSheetXlsx } from '/@/components/Excel'; ``` ### 數組格式數據導出 ```ts import { aoaToSheetXlsx } from '/@/components/Excel'; // 保證data順序與header一致 aoaToSheetXlsx({ data: [], header: [], filename: '二維數組方式導出excel.xlsx', }); ``` ### 自定義導出格式 ```ts import { jsonToSheetXlsx } from '/@/components/Excel'; jsonToSheetXlsx({ data, filename, write2excelOpts: { // 可以是 xlsx/html/csv/txt bookType, }, }); ``` ### json 格式導出 ```ts 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` 的可選參數 |