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 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] ?? '')} + :