From 1d4da4caf521b1d6771a7f78e5f491cc878817bf Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Fri, 9 May 2025 16:55:09 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20boldArray=20p?= =?UTF-8?q?roperty=20=EC=B6=94=EA=B0=80=20(=EC=97=AD=ED=95=A0=20:=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95=EB=90=9C=20array=EC=9D=98=20=EA=B8=80?= =?UTF-8?q?=EC=94=A8=EC=83=89=20=EA=B5=B5=EA=B2=8C=20=EB=B3=80=EA=B2=BD)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/table/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 00fc376e6..f02c1d3ac 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -14,6 +14,7 @@ type UiTableProps = { className?: string; resetPageNo?: boolean; children?: React.ReactNode | undefined; + boldArray?: number[]; } type UiHeadProps = { @@ -23,7 +24,7 @@ type UiHeadProps = { visible?:boolean; } -export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) { +export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [] }: UiTableProps) { const [cur, setCur] = useState(1); const [idx, setIdx] = useState(-1); @@ -63,6 +64,16 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr .filter((item) => item.visible != false) .map((head) => ( head.id && head.id.length > 1 && ( + boldArray.includes(index) ? handleCellClick(index, head.id)} + key={`cell-${head.id}-${index}`} + > + {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')} + : Date: Tue, 13 May 2025 09:33:29 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=97=91=EC=85=80=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=202=EA=B0=9C=EC=9D=B4=EC=83=81=20=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/excel/excelStyle.tsx | 48 +++++++++--- .../src/ui/excel/index.tsx | 76 ++++++++++++++++++- 2 files changed, 112 insertions(+), 12 deletions(-) diff --git a/packages/common/business_components/src/ui/excel/excelStyle.tsx b/packages/common/business_components/src/ui/excel/excelStyle.tsx index 2475d1453..adc21880b 100644 --- a/packages/common/business_components/src/ui/excel/excelStyle.tsx +++ b/packages/common/business_components/src/ui/excel/excelStyle.tsx @@ -1,24 +1,54 @@ +import type { sheetParameter } from '@/index'; import * as XlsxPopulate from '@xlsx/xlsx-populate'; -export const excelStyle = async (data: ArrayBuffer, range: string = "A1:V3", fileNm:string) => { - console.log("excelStyle", data, range, fileNm); - const workbook = await XlsxPopulate.Workbook.fromData(data); - const rangeCells = workbook.activeSheet(0)?.sheet(0)?.range(range); - console.log(rangeCells); - rangeCells?.style((styleQ)=>{ - console.log(styleQ); + + + +const makeCellStyle =(styleQ: XlsxPopulate.StyleQuery )=>{ styleQ.fill({ type: "solid", color: {rgb:"9bc1e7"} }); styleQ.borderEach( { style: "thin", color: { rgb: "FFFFFF" } } ); styleQ.wrapText(true); // styleQ.fontColor({rgb:"FFFFFF"}); - styleQ.fontSize(15); + styleQ.fontSize(13); styleQ.horizontalAlignment("center"); styleQ.verticalAlignment("center"); styleQ.bold(true); - }); +} + +const makeExcelFile = async(workbook: XlsxPopulate.Workbook,fileNm:string)=>{ const outputData = await workbook.output("array-buffer"); const blob = new Blob([outputData], { type: "application/octet-stream" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = fileNm+".xlsx"; link.click(); + +} + + +export const excelStyle = async (data: ArrayBuffer, range: string = "A1:V3", fileNm:string) => { + const workbook = await XlsxPopulate.Workbook.fromData(data); + const rangeCells = workbook.activeSheet(0)?.sheet(0)?.range(range); + console.log(rangeCells); + rangeCells?.style((styleQ)=>{ + makeCellStyle(styleQ) + }); + makeExcelFile(workbook, fileNm) + + +} + + +export const excelArrayStyle = async (data: ArrayBuffer, range: [typeof sheetParameter], fileNm:string) => { + const workbook = await XlsxPopulate.Workbook.fromData(data); + if(range){ + range.forEach((item , index)=>{ + const rangeCells = workbook.activeSheet(index)?.sheet(index)?.range(item.headerRange); + console.log(rangeCells); + rangeCells?.style((styleQ)=>{ + makeCellStyle(styleQ) + }); + } ) + } + makeExcelFile(workbook, fileNm) + } \ No newline at end of file diff --git a/packages/common/business_components/src/ui/excel/index.tsx b/packages/common/business_components/src/ui/excel/index.tsx index c17aa0660..e33b0c88d 100644 --- a/packages/common/business_components/src/ui/excel/index.tsx +++ b/packages/common/business_components/src/ui/excel/index.tsx @@ -1,5 +1,5 @@ import * as XLSX from 'xlsx'; -import { excelStyle } from './excelStyle'; +import { excelArrayStyle, excelStyle } from './excelStyle'; type ExcelDownloadProps = { data: JSON | JSON[]; @@ -32,7 +32,6 @@ export const filePicked=(oFile: File, headerNum:number=0):Promise =>{ + // Create A File Reader HTML5 + const reader = new FileReader(); + return new Promise((resolve, reject) => { + // Ready The Event For When A File Gets Selected + reader.onload = function (e) { + const data = e.target?.result; + if (!data) { + console.error("Failed to read file: e.target.result is null"); + resolve(undefined); + return; + } + //셀데이터에서 데이트 형식으로 입력하면 yyyymmdd 형식으로 변환 + const wb = XLSX.read(data, { type: 'binary', cellDates: true, dateNF: "yyyymmdd" }); + const arrayXls: JSON[] = [] + let jsonXls: JSON | undefined; + // Loop Over Each Sheet + wb.SheetNames.forEach(function (sheetName,index ) { + const sheet = wb.Sheets[sheetName]; + if (sheet) { + console.log(sheet) + jsonXls = XLSX.utils.sheet_to_json(sheet, { range: headerNum, raw:false }) as unknown as JSON; + arrayXls.push(jsonXls) + } else { + console.error(`Sheet "${sheetName}" is undefined.`); + } + }); + resolve(arrayXls); + + }; + + reader.onerror = function () { + console.error("Error reading file"); + reject(undefined); + }; + + // Tell JS To Start Reading The File.. You could delay this if desired + reader.readAsBinaryString(oFile); + }); +} + + + export const filePickedBlob=(oFile: ArrayBuffer, data:[][],fileNm:string, headerNum:number=0, headerRange='A1:V3'):Promise =>{ // Create A File Reader HTML5 return new Promise(() => { // Ready The Event For When A File Gets Selected @@ -83,4 +125,32 @@ export const filePickedBlob=(oFile: ArrayBuffer, data:[][],fileNm:string, header } }); }); - } \ No newline at end of file + } + +export const sheetParameter ={ + data:[[]], headerNum:0, headerRange:'A1:V3' + } + export const filePickedBlobArray= (oFile: ArrayBuffer,fileNm:string, sheetArray: [typeof sheetParameter]):Promise =>{ // Create A File Reader HTML5 + return new Promise (async () => { + // Ready The Event For When A File Gets Selected + const wb = XLSX.read(oFile, { type: 'binary' }); + // Loop Over Each Sheet + wb.SheetNames.forEach( function (sheetName, index) { + // Obtain The Current Row As CSV + if(sheetArray[index]){ + const sheet = wb.Sheets[sheetName]; + if (sheet) { + //오리진 확인 test 필요 + // const sheet = XLSX.utils.json_to_sheet(data); + XLSX.utils.sheet_add_aoa(sheet, sheetArray[index].data, { origin: 'A'+sheetArray[index].headerNum }); + // XLSX.utils.book_append_sheet(wb, sheet, 'test'); + } else { + console.error(`Sheet "${sheetName}" is undefined.`); + } + } + }); + + + await excelArrayStyle(XLSX.write(wb, { bookType: "xlsx", type: "buffer" }), sheetArray, fileNm) + }); + } \ No newline at end of file