feat(excel-preview): initial implementation of Excel Preview UI

Author: jezlan

README.md

@@ -17,7 +17,7 @@ You are welcome to **test, explore, and contribute**! 🚀
 ✅ Export any Doctype data into Excel with custom formats  
 ✅ Define multiple Excel templates for the same Doctype  
 ✅ Easy-to-use interface to create, manage, and apply Excel formats  
-✅ Preview feature to test the format before export  
+🧪 **Excel Preview feature** to test the format before export (**🔬 In Testing Stage**)  
 ✅ **Attach or Download Excel:** Option to attach Excel to the document or directly download it  
 
 ---
@@ -38,13 +38,15 @@ bench --site your-site-name install-app xcelform
 1. Go to the respective Doctype.
 2. Click on **XF Excel Format**.
 3. Select the desired format.
-4. Choose whether to **attach** the file to the document or **download** it.
-5. Export the customized Excel file!  
+4. Click **Preview** to test the format (currently in testing phase).
+5. Choose whether to **attach** the file to the document or **download** it.
+6. Export the customized Excel file!  
 
 ---
 
 ## ⚡️ **How It Works**
-- **Excel Formats:** Define custom Excel formats in the **XF Excel Format** Doctype.  
+- **Excel Formats:** Define custom Excel formats in the **XF Excel Format** Doctype.
+- **Excel Preview(🔬 Testing):** Allows users to preview the Excel layout and formatting before export.
 - **Attach or Download:** Users can choose to attach the Excel file to the document or download it.  
 - **Export Confirmation:** A success message appears when the file is attached or downloaded.  
 

xcelform/public/js/add_custom_button.js

@@ -116,6 +116,35 @@ function show_excel_format_dialog(frm) {
             });
           }
         },
+        secondary_action_label: __("Preview"),
+        secondary_action(values) {
+          console.log("hiii")
+          frappe.call({
+            method: "xcelform.xcelform.hooks.xf_excel_utils.export_to_xf_excel",
+            args: {
+                doctype: frm.doc.doctype,
+                doc_name: frm.doc.name,
+                excel_format: values.excel_format,
+                is_preview: 1
+            },
+            callback: function (r) {
+              if (r.message) {
+                let previewHtml = r.message.preview;
+                let dialog = new frappe.ui.Dialog({
+                    title: "Excel Preview",
+                    fields: [
+                        {
+                            fieldtype: "HTML",
+                            fieldname: "preview",
+                            options: `<div style="overflow:auto; max-height:500px;">${previewHtml}</div>`
+                        }
+                    ]
+                });
+                dialog.show();
+            }
+            }
+        });
+        }
       });
 
       d.show();

xcelform/xcelform/hooks/xf_excel_utils.py

@@ -4,11 +4,13 @@
 from openpyxl.utils import get_column_letter
 from openpyxl.drawing.image import Image
 from frappe.utils.file_manager import save_file
-
+from openpyxl import load_workbook
+import pandas as pd
+from io import BytesIO
 
 @frappe.whitelist()
 def export_to_xf_excel(
-    doctype, doc_name, excel_format=None, attach=False, download=False
+    doctype, doc_name, excel_format=None, attach=False, download=False,is_preview=False
 ):
 
     doc = frappe.get_doc(doctype, doc_name)
@@ -59,6 +61,10 @@ def export_to_xf_excel(
 
     file_name = f"XF_Excel_{doctype}_{doc_name}.xlsx"
 
+    if is_preview:
+        html_preview = generate_excel_preview(output)
+        return {"preview": html_preview}
+
     if attach:
         file_doc = save_file(file_name, output.read(), doctype, doc_name, is_private=1)
         return file_doc.file_url
@@ -79,3 +85,55 @@ def get_default_excel_format(doctype):
         "XF Excel Format", {"doc_type": doctype, "is_default": 1}, "name"
     )
     return default_format
+
+
+def rgb_to_hex(rgb):
+    """Convert Excel's ARGB color to HEX"""
+    if rgb is None or rgb == "00000000":
+        return "#FFFFFF"  
+    return f"#{rgb[-6:]}"
+
+def generate_excel_preview(output):
+    output.seek(0)
+    wb = load_workbook(BytesIO(output.read()))
+    ws = wb.active  
+
+    merged_cells = {}
+    for merged_range in ws.merged_cells.ranges:
+        min_row, min_col, max_row, max_col = merged_range.min_row, merged_range.min_col, merged_range.max_row, merged_range.max_col
+        merged_cells[(min_row, min_col)] = (max_row - min_row + 1, max_col - min_col + 1)
+
+  
+    html = "<table border='1' style='border-collapse: collapse; width: 100%; text-align: center;'>"
+
+    for row_idx, row in enumerate(ws.iter_rows(), start=1):
+        html += "<tr>"
+        for col_idx, cell in enumerate(row, start=1):
+            if any((row_idx, col_idx) in merged_range for merged_range in merged_cells if (row_idx, col_idx) != merged_range):
+                continue  
+
+            rowspan, colspan = merged_cells.get((row_idx, col_idx), (1, 1))
+            rowspan_attr = f' rowspan="{rowspan}"' if rowspan > 1 else ""
+            colspan_attr = f' colspan="{colspan}"' if colspan > 1 else ""
+
+           
+            bold = "font-weight: bold;" if cell.font and cell.font.bold else ""
+            bg_color = rgb_to_hex(cell.fill.start_color.rgb)  
+            text_align = "center" 
+            if cell.alignment:
+                if cell.alignment.horizontal:
+                    text_align = cell.alignment.horizontal
+                elif isinstance(cell.alignment, Alignment):
+                    text_align = cell.alignment.horizontal or "center"
+
+           
+            value = cell.value if cell.value is not None else ""
+
+            cell_style = f"background-color: {bg_color}; text-align: {text_align}; padding: 5px; border: 1px solid black; {bold}".strip()
+            html += f"<td style=\"{cell_style}\"{rowspan_attr}{colspan_attr}>{value}</td>"
+        html += "</tr>"
+
+    html += "</table>"
+
+    return html
+