reverse mode + buggy

Mr-Yavar · Dec 2, 2024 · 04f0aa5 · 04f0aa5
1 parent 07fbdee
commit 04f0aa5
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 41 deletions.
diff --git a/examples/main.tsx b/examples/main.tsx
@@ -10,12 +10,11 @@ const App: React.FC = () => {
     documentTitle: "Sample",
     sheetOptions: [
       {
-        htmlContent: renderToString(<SampleTable />, {
-          identifierPrefix: "212",
-        }),
+        htmlContent: renderToString(<SampleTable />),
         title: "Samewrthple",
         isRTL: false,
-      }
+        reverse: true,
+      },
     ],
   });
 

diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "react-to-excel",
   "private": false,
-  "description": "A simple lib",
-  "version": "0.0.2-b",
+  "description": "a simple library to export React components and HTML tables to Excel files",
+  "version": "0.0.3-b1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Mr-Yavar/react-to-excel.git"

diff --git a/src/hooks/useReactToExcel.ts b/src/hooks/useReactToExcel.ts
@@ -14,15 +14,15 @@ import { HandlePrintWindowOnLoadData } from "../utils/handlePrintWindowOnLoad.ts
 import { appendPrintWindow } from "../utils/appendPrintWindow.ts";
 
 export function useReactToExcel(
-  options: useReactToExcelOptions
+  options: useReactToExcelOptions,
 ): useReactToExcelFn {
   const handleExcel = useCallback(async () => {
     const workbook = await initializeWorkbook(options);
 
     for (let i = 0; i < options.sheetOptions.length; i++) {
       const sheetOption = options.sheetOptions[i];
       const sheetName = sheetOption?.title || `Sheet ${i + 1}`;
-
+      const reverseMode = sheetOption.reverse ?? false;
       if (sheetOption.htmlContent) {
         // Ensure we remove any pre-existing print windows before adding a new one
         removePrintIframe(options.preserveAfterPrint, true);
@@ -40,10 +40,10 @@ export function useReactToExcel(
         const clonedContentNode = contentNode.cloneNode(true);
 
         const globalLinkNodes = document.querySelectorAll(
-          "link[rel~='stylesheet'], link[as='style']"
+          "link[rel~='stylesheet'], link[as='style']",
         );
         const clonedImgNodes = (clonedContentNode as Element).querySelectorAll(
-          "img"
+          "img",
         );
         const clonedVideoNodes = (
           clonedContentNode as Element
@@ -63,9 +63,7 @@ export function useReactToExcel(
          * Keeps track of loaded resources, kicking off the actual print function once all
          * resources have been marked (loaded or failed)
          */
-        const markLoaded = (
-          resource: Element | Font | FontFace
-        ) => {
+        const markLoaded = (resource: Element | Font | FontFace) => {
           if (resourcesLoaded.includes(resource)) {
             return;
           }
@@ -76,7 +74,13 @@ export function useReactToExcel(
             resourcesLoaded.length + resourcesErrored.length;
 
           if (numResourcesManaged === numResourcesToLoad) {
-            toExcel(workbook, printWindow, sheetOption.isRTL, sheetName, false);
+            toExcel(
+              workbook,
+              printWindow,
+              sheetOption.isRTL,
+              sheetName,
+              reverseMode,
+            );
           }
         };
         const data: HandlePrintWindowOnLoadData = {
@@ -86,10 +90,16 @@ export function useReactToExcel(
           clonedVideoNodes,
           numResourcesToLoad,
           originalCanvasNodes: (contentNode as Element).querySelectorAll(
-            "canvas"
+            "canvas",
           ),
           toExcelFn: (printWindow: HTMLIFrameElement) =>
-            toExcel(workbook, printWindow, sheetOption.isRTL, sheetName, false),
+            toExcel(
+              workbook,
+              printWindow,
+              sheetOption.isRTL,
+              sheetName,
+              reverseMode,
+            ),
         };
 
         // Ensure we run `onBeforePrint` before appending the print window, which kicks off loading
@@ -106,16 +116,13 @@ export function useReactToExcel(
             sheetOption.contentRef.current as HTMLElement,
             sheetOption.isRTL,
             sheetName,
-            false
+            reverseMode,
           );
       }
       //console.log("===============");
     }
 
-    console.log(122);
-
-      saveWorkbook(workbook, options.documentTitle ?? window.document.title);
-
+    saveWorkbook(workbook, options.documentTitle ?? window.document.title);
   }, [options]);
   return handleExcel;
 }
diff --git a/src/types/SheetOption.ts b/src/types/SheetOption.ts
@@ -5,4 +5,6 @@ export interface SheetOption {
     htmlContent?:string;
     title : string;
     isRTL:boolean;
+    reverse?:boolean;
+
 }
diff --git a/src/utils/toExcel.ts b/src/utils/toExcel.ts
@@ -15,7 +15,7 @@ export function toExcel(
   content: HTMLIFrameElement | Element,
   isRTL: boolean,
   SheetName: string,
-  rightHand = false
+  rightHand = false,
 ) {
   const sheet = workbook.addWorksheet(SheetName);
   sheet.views = [{ rightToLeft: isRTL }];
@@ -29,25 +29,28 @@ export function toExcel(
     tables = content.querySelectorAll(`* > table`);
   }
 
-
   let RowNumber = 1; // Initialize RowNumber for each table
   for (let j = 0; j < tables.length; j++) {
     const table = tables[j];
-    RowNumber = TableReader(table as HTMLTableElement, sheet, workbook,RowNumber, rightHand);
+    RowNumber =
+      TableReader(
+        table as HTMLTableElement,
+        sheet,
+        workbook,
+        RowNumber,
+        rightHand,
+      ) + 1;
   }
-
-
-
 }
 
 function TableReader(
   Table: HTMLTableElement | null,
   sheet: Excel.Worksheet,
   workbook: Excel.Workbook,
-  initialRowNumber:number,
-  rightHand: boolean
-):number {
-  if (Table == null) return initialRowNumber;
+  initialRowNumber: number,
+  rightHand: boolean,
+): number {
+  if (Table == null) return initialRowNumber - 1;
 
   let tableEl: HTMLTableElement | null = Table;
 
@@ -76,7 +79,13 @@ function TableReader(
         const th = cells[cIndex];
         if (th.firstElementChild instanceof HTMLTableElement) {
           const TempRow = RowNumber;
-          TableReader(th.firstElementChild, sheet, workbook,RowNumber, rightHand);
+          TableReader(
+            th.firstElementChild,
+            sheet,
+            workbook,
+            RowNumber,
+            rightHand,
+          );
           RowNumber = TempRow; // Restore RowNumber after processing child table
         } else {
           const temp = th.cloneNode(true) as HTMLElement;
@@ -107,7 +116,7 @@ function TableReader(
                   },
                   ext: { width: img.clientWidth, height: img.clientHeight },
                 });
-              }
+              },
             );
           } else {
             row.getCell(CellNumber).value = generateCellValue(temp);
@@ -126,13 +135,13 @@ function TableReader(
               RowNumber,
               CellNumber,
               RowNumber + rowspan - 1,
-              CellNumber + colspan - 1
+              CellNumber + colspan - 1,
             );
           }
 
           // Adjust row height
           const heightPerRow = convertPixelsToPoints(
-            Number(th.clientHeight) / (rowspan || 1)
+            Number(th.clientHeight) / (rowspan || 1),
           );
           for (
             let rnumber = RowNumber;
@@ -147,7 +156,7 @@ function TableReader(
 
           // Adjust column width
           const maxlength = Math.max(
-            ...temp.innerText.split("\n").map((str) => str.trim().length)
+            ...temp.innerText.split("\n").map((str) => str.trim().length),
           );
           const widthPerColumn = maxlength / (colspan || 1);
 
@@ -184,7 +193,13 @@ function TableReader(
         const th = cells[cIndex];
         if (th.firstElementChild instanceof HTMLTableElement) {
           const TempRow = RowNumber;
-          TableReader(th.firstElementChild, sheet, workbook,RowNumber, rightHand);
+          TableReader(
+            th.firstElementChild,
+            sheet,
+            workbook,
+            RowNumber,
+            rightHand,
+          );
           RowNumber = TempRow;
         } else {
           const temp = th.cloneNode(true) as HTMLElement;
@@ -203,7 +218,7 @@ function TableReader(
           } else {
             row.getCell(CellNumber).value = Number(th.innerText);
             row.getCell(CellNumber).numFmt = identifyNumberFormat(
-              th.innerText.trim()
+              th.innerText.trim(),
             );
             row.getCell(CellNumber).style = {
               font: { name: "Times New Roman" },
@@ -218,12 +233,12 @@ function TableReader(
               RowNumber,
               CellNumber,
               RowNumber + rowspan - 1,
-              CellNumber + colspan - 1
+              CellNumber + colspan - 1,
             );
           }
 
           const heightPerRow = convertPixelsToPoints(
-            Number(th.clientHeight) / (rowspan || 1)
+            Number(th.clientHeight) / (rowspan || 1),
           );
           for (
             let rnumber = RowNumber;
@@ -237,7 +252,7 @@ function TableReader(
           }
 
           const maxlength = Math.max(
-            ...temp.innerText.split("\n").map((str) => str.trim().length)
+            ...temp.innerText.split("\n").map((str) => str.trim().length),
           );
           const widthPerColumn = maxlength / (colspan || 1);