From 9579a45b3cd35f432f3b0f8dc2ec97b8d2201603 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wit=E3=80=86=E8=8B=97=E5=A4=A7?= <454690789@qq.com> Date: Thu, 30 Mar 2023 09:53:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(excel=E5=AF=BC=E5=87=BA):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=89=B9=E9=87=8F=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD?= =?UTF-8?q?,=20=E5=A2=9E=E5=8A=A0demo=E7=A4=BA=E4=BE=8B=20(#2657)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(excel导出): 批量导出功能 * feat(excel导出): 批量导出功能, 增加参数类型定义;增加demo示例 --------- Co-authored-by: 苗大 --- src/components/Excel/src/Export2Excel.ts | 71 +++++++++++++++++++++++- src/components/Excel/src/typing.ts | 14 +++++ src/views/demo/excel/ArrayExport.vue | 21 +++++++ src/views/demo/excel/JsonExport.vue | 31 +++++++++++ 4 files changed, 135 insertions(+), 2 deletions(-) diff --git a/src/components/Excel/src/Export2Excel.ts b/src/components/Excel/src/Export2Excel.ts index 53d12aef..3c78f76e 100644 --- a/src/components/Excel/src/Export2Excel.ts +++ b/src/components/Excel/src/Export2Excel.ts @@ -1,10 +1,12 @@ import * as xlsx from 'xlsx'; import type { WorkBook } from 'xlsx'; import type { JsonToSheet, AoAToSheet } from './typing'; +import { AoaToMultipleSheet, JsonToMultipleSheet } from './typing'; const { utils, writeFile } = xlsx; const DEF_FILE_NAME = 'excel-list.xlsx'; +const DEF_SHEET_NAME = 'sheet'; /** * @param data source data @@ -32,6 +34,7 @@ export function jsonToSheetXlsx({ data, header, filename = DEF_FILE_NAME, + sheetName = DEF_SHEET_NAME, json2sheetOpts = {}, write2excelOpts = { bookType: 'xlsx' }, }: JsonToSheet) { @@ -45,9 +48,9 @@ export function jsonToSheetXlsx({ setColumnWidth(arrData, worksheet); /* add worksheet to workbook */ const workbook: WorkBook = { - SheetNames: [filename], + SheetNames: [sheetName], Sheets: { - [filename]: worksheet, + [sheetName]: worksheet, }, }; /* output format determined by filename */ @@ -79,3 +82,67 @@ export function aoaToSheetXlsx({ writeFile(workbook, filename, write2excelOpts); /* at this point, out.xlsb will have been downloaded */ } + +/** + * json导出多Sheet的Xlsx + * @param sheetList 多sheet配置 + * @param filename 文件名(包含后缀) + * @param write2excelOpts 文件配置 + */ +export function jsonToMultipleSheetXlsx({ + sheetList, + filename = DEF_FILE_NAME, + write2excelOpts = { bookType: 'xlsx' }, +}: JsonToMultipleSheet) { + const workbook: WorkBook = { + SheetNames: [], + Sheets: {}, + }; + sheetList.forEach((p, index) => { + const arrData = [...p.data]; + if (p.header) { + arrData.unshift(p.header); + p.json2sheetOpts = p.json2sheetOpts || {}; + p.json2sheetOpts.skipHeader = true; + } + + const worksheet = utils.json_to_sheet(arrData, p.json2sheetOpts); + setColumnWidth(arrData, worksheet); + + p.sheetName = p.sheetName || `${DEF_SHEET_NAME}${index}`; + workbook.SheetNames.push(p.sheetName); + workbook.Sheets[p.sheetName] = worksheet; + }); + writeFile(workbook, filename, write2excelOpts); +} + +/** + * aoa导出多Sheet的Xlsx + * @param sheetList 多sheet配置 + * @param filename 文件名(包含后缀) + * @param write2excelOpts 文件配置 + */ +export function aoaToMultipleSheetXlsx({ + sheetList, + filename = DEF_FILE_NAME, + write2excelOpts = { bookType: 'xlsx' }, +}: AoaToMultipleSheet) { + const workbook: WorkBook = { + SheetNames: [], + Sheets: {}, + }; + sheetList.forEach((p, index) => { + const arrData = [...p.data]; + if (p.header) { + arrData.unshift(p.header); + } + const worksheet = utils.aoa_to_sheet(arrData); + + p.sheetName = p.sheetName || `${DEF_SHEET_NAME}${index}`; + workbook.SheetNames.push(p.sheetName); + workbook.Sheets[p.sheetName] = worksheet; + }); + /* output format determined by filename */ + writeFile(workbook, filename, write2excelOpts); + /* at this point, out.xlsb will have been downloaded */ +} diff --git a/src/components/Excel/src/typing.ts b/src/components/Excel/src/typing.ts index e55e549e..b5808f7e 100644 --- a/src/components/Excel/src/typing.ts +++ b/src/components/Excel/src/typing.ts @@ -10,6 +10,7 @@ export interface JsonToSheet { data: T[]; header?: T; filename?: string; + sheetName?: string; json2sheetOpts?: JSON2SheetOpts; write2excelOpts?: WritingOptions; } @@ -18,6 +19,7 @@ export interface AoAToSheet { data: T[][]; header?: T[]; filename?: string; + sheetName?: string; write2excelOpts?: WritingOptions; } @@ -25,3 +27,15 @@ export interface ExportModalResult { filename: string; bookType: BookType; } + +export interface JsonToMultipleSheet { + sheetList: JsonToSheet[]; + filename?: string; + write2excelOpts?: WritingOptions; +} + +export interface AoaToMultipleSheet { + sheetList: AoAToSheet[]; + filename?: string; + write2excelOpts?: WritingOptions; +} diff --git a/src/views/demo/excel/ArrayExport.vue b/src/views/demo/excel/ArrayExport.vue index 676832d0..fb53b329 100644 --- a/src/views/demo/excel/ArrayExport.vue +++ b/src/views/demo/excel/ArrayExport.vue @@ -3,6 +3,7 @@ @@ -14,6 +15,7 @@ import { aoaToSheetXlsx } from '/@/components/Excel'; import { arrHeader, arrData, columns, data } from './data'; import { PageWrapper } from '/@/components/Page'; + import { aoaToMultipleSheetXlsx } from '/@/components/Excel/src/Export2Excel'; export default defineComponent({ components: { BasicTable, PageWrapper }, @@ -26,9 +28,28 @@ filename: '二维数组方式导出excel.xlsx', }); } + function aoaToMultipleSheet() { + // 保证data顺序与header一致 + aoaToMultipleSheetXlsx({ + sheetList: [ + { + data: arrData, + header: arrHeader, + sheetName: 'Sheet1', + }, + { + data: arrData, + header: arrHeader, + sheetName: 'Sheet2', + }, + ], + filename: '二维数组方式导出excel-多Sheet示例.xlsx', + }); + } return { aoaToExcel, + aoaToMultipleSheet, columns, data, }; diff --git a/src/views/demo/excel/JsonExport.vue b/src/views/demo/excel/JsonExport.vue index 413d9b9e..d1789ea0 100644 --- a/src/views/demo/excel/JsonExport.vue +++ b/src/views/demo/excel/JsonExport.vue @@ -4,6 +4,7 @@ @@ -15,6 +16,7 @@ import { jsonToSheetXlsx } from '/@/components/Excel'; import { columns, data } from './data'; import { PageWrapper } from '/@/components/Page'; + import { jsonToMultipleSheetXlsx } from '/@/components/Excel/src/Export2Excel'; export default defineComponent({ components: { BasicTable, PageWrapper }, @@ -47,9 +49,38 @@ }); } + function handleMultipleSheet() { + jsonToMultipleSheetXlsx({ + sheetList: [ + { + data, + sheetName: '使用key作为默认头部', + }, + { + data, + header: { + id: 'ID', + name: '姓名', + age: '年龄', + no: '编号', + address: '地址', + beginTime: '开始时间', + endTime: '结束时间', + }, + json2sheetOpts: { + // 指定顺序 + header: ['name', 'id'], + }, + sheetName: '自定义头部', + }, + ], + filename: '多Sheet导出示例.xlsx', + }); + } return { defaultHeader, customHeader, + handleMultipleSheet, columns, data, };