Word Excel viewer Example

examples/025_Example_DocxViewer.au3

@@ -0,0 +1,80 @@
+#AutoIt3Wrapper_UseX64=n
+#AutoIt3Wrapper_Run_AU3Check=Y
+#AutoIt3Wrapper_AU3Check_Stop_OnWarning=y
+#AutoIt3Wrapper_AU3Check_Parameters=-d -w 1 -w 2 -w 3 -w 4 -w 5 -w 6 -w 7
+
+; 025_Example_DocxViewer.au3
+
+#include <GUIConstantsEx.au3>
+#include <WindowsConstants.au3>
+#include <FileConstants.au3>
+
+#include "..\NetWebView2Lib.au3"
+
+; 🏆 https://unpkg.com/jszip/dist/jszip.min.js
+; 🏆 https://unpkg.com/docx-preview@0.4.0/dist/docx-preview.min.js
+
+$_g_bNetWebView2_DebugInfo = False
+
+_Example_DocxViewer()
+
+Func _Example_DocxViewer()
+	ConsoleWrite("! MicrosoftEdgeWebview2 : version check: " & _NetWebView2_IsAlreadyInstalled() & ' ERR=' & @error & ' EXT=' & @extended & @CRLF)
+
+	Local $oMyError = ObjEvent("AutoIt.Error", __NetWebView2_COMErrFunc)
+	#forceref $oMyError
+
+	#Region ; GUI CREATION
+	Local $hGUI = GUICreate("WebView2 - Dynamic Word Viewer", 900, 750, -1, -1, BitOR($WS_OVERLAPPEDWINDOW, $WS_CLIPCHILDREN))
+	GUISetBkColor(0x2B2B2B, $hGUI)
+
+	; Label to open File Dialog
+	Local $idLoadFile = GUICtrlCreateLabel("Load Word Document", 20, 10, 180, 30)
+	GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
+	GUICtrlSetResizing(-1, $GUI_DOCKALL)
+	GUICtrlSetColor(-1, 0x00CCFF) ; Light Blue
+
+	; Initialize Manager with Chromium flag for local file access
+	Local $oWebV2M = _NetWebView2_CreateManager("", "", "--allow-file-access-from-files")
+	If @error Then Return SetError(@error, @extended, $oWebV2M)
+
+	Local $sProfileDirectory = @ScriptDir & "\NetWebView2Lib-UserDataFolder"
+	; Reserve 40px top offset for the control panel
+	_NetWebView2_Initialize($oWebV2M, $hGUI, $sProfileDirectory, 0, 40, 0, 0, True, True, 1.2, "0x2B2B2B")
+
+	; Set Virtual Mapping
+	Local $sMappedFolder = @ScriptDir & "\JS_Lib\docviewer"
+	_NetWebView2_SetVirtualHostNameToFolderMapping($oWebV2M, "docviewer.local", $sMappedFolder, 0)
+
+	; Navigate to the HTML viewer page
+	_NetWebView2_Navigate($oWebV2M, "https://docviewer.local/index.html")
+
+	GUISetState(@SW_SHOW)
+	#EndRegion ; GUI CREATION
+
+	#Region ; GUI Loop
+	While 1
+		Switch GUIGetMsg()
+			Case $GUI_EVENT_CLOSE
+				ExitLoop
+
+			Case $idLoadFile
+				Local $sFilePath = FileOpenDialog("Select Word Document", @ScriptDir, "Word Files (*.docx)", 1)
+				If Not @error Then
+					; Copy selected file to MappedFolder as active_file.docx
+					Local $sTargetFile = $sMappedFolder & "\active_file.docx"
+					FileCopy($sFilePath, $sTargetFile, $FC_OVERWRITE)
+
+					; Call JS function using _NetWebView2_ExecuteScript (Mode 0: Fire-and-Forget)
+					_NetWebView2_ExecuteScript($oWebV2M, "renderLocalDocx('active_file.docx');")
+				EndIf
+
+		EndSwitch
+	WEnd
+
+	Local $oJSBridge
+	_NetWebView2_CleanUp($oWebV2M, $oJSBridge)
+	GUIDelete($hGUI)
+	#EndRegion ; GUI Loop
+
+EndFunc   ;==>_Example_DocxViewer

examples/025_Example_XlsxViewer.au3

@@ -0,0 +1,79 @@
+#AutoIt3Wrapper_UseX64=n
+#AutoIt3Wrapper_Run_AU3Check=Y
+#AutoIt3Wrapper_AU3Check_Stop_OnWarning=y
+#AutoIt3Wrapper_AU3Check_Parameters=-d -w 1 -w 2 -w 3 -w 4 -w 5 -w 6 -w 7
+
+; 025_Example_XlsxViewer.au3
+
+#include <GUIConstantsEx.au3>
+#include <WindowsConstants.au3>
+#include <FileConstants.au3>
+
+#include "..\NetWebView2Lib.au3"
+
+; 🏆 https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js
+
+$_g_bNetWebView2_DebugInfo = False
+
+_Example_XlsxViewer()
+
+Func _Example_XlsxViewer()
+	ConsoleWrite("! MicrosoftEdgeWebview2 : version check: " & _NetWebView2_IsAlreadyInstalled() & ' ERR=' & @error & ' EXT=' & @extended & @CRLF)
+
+	Local $oMyError = ObjEvent("AutoIt.Error", __NetWebView2_COMErrFunc)
+	#forceref $oMyError
+
+	#Region ; GUI CREATION
+	Local $hGUI = GUICreate("WebView2 - Dynamic Excel Viewer", 900, 750, -1, -1, BitOR($WS_OVERLAPPEDWINDOW, $WS_CLIPCHILDREN))
+	GUISetBkColor(0x2B2B2B, $hGUI)
+
+	; Label to open File Dialog
+	Local $idLoadFile = GUICtrlCreateLabel("Load Excel Document", 20, 10, 180, 30)
+	GUICtrlSetFont(-1, 12, Default, $GUI_FONTUNDER, "Segoe UI")
+	GUICtrlSetResizing(-1, $GUI_DOCKALL)
+	GUICtrlSetColor(-1, 0x00CCFF) ; Light Blue
+
+	; Initialize Manager with Chromium flag for local file access
+	Local $oWebV2M = _NetWebView2_CreateManager("", "", "--allow-file-access-from-files")
+	If @error Then Return SetError(@error, @extended, $oWebV2M)
+
+	Local $sProfileDirectory = @ScriptDir & "\NetWebView2Lib-UserDataFolder"
+	; Reserve 40px top offset for control panel
+	_NetWebView2_Initialize($oWebV2M, $hGUI, $sProfileDirectory, 0, 40, 0, 0, True, True, 1.2, "0x2B2B2B")
+
+	; Set Virtual Mapping
+	Local $sMappedFolder = @ScriptDir & "\JS_Lib\excelviewer"
+	_NetWebView2_SetVirtualHostNameToFolderMapping($oWebV2M, "excelviewer.local", $sMappedFolder, 0)
+
+	; Navigate to the HTML viewer page
+	_NetWebView2_Navigate($oWebV2M, "https://excelviewer.local/index.html")
+
+	GUISetState(@SW_SHOW)
+	#EndRegion ; GUI CREATION
+
+	#Region ; GUI Loop
+	While 1
+		Switch GUIGetMsg()
+			Case $GUI_EVENT_CLOSE
+				ExitLoop
+
+			Case $idLoadFile
+				Local $sFilePath = FileOpenDialog("Select Excel Document", @ScriptDir, "Excel Files (*.xlsx;*.xls)", 1)
+				If Not @error Then
+					; Copy selected file to MappedFolder as active_file.xlsx
+					Local $sTargetFile = $sMappedFolder & "\active_file.xlsx"
+					FileCopy($sFilePath, $sTargetFile, $FC_OVERWRITE)
+
+					; Call JS function using _NetWebView2_ExecuteScript (Mode 0: Fire-and-Forget)
+					_NetWebView2_ExecuteScript($oWebV2M, "renderLocalXlsx('active_file.xlsx');")
+				EndIf
+
+		EndSwitch
+	WEnd
+
+	Local $oJSBridge
+	_NetWebView2_CleanUp($oWebV2M, $oJSBridge)
+	GUIDelete($hGUI)
+	#EndRegion ; GUI Loop
+
+EndFunc   ;==>_Example_XlsxViewer

examples/JS_Lib/docviewer/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>DOCX Viewer</title>
+    <script src="js/jszip.min.js"></script>
+    <script src="js/docx-preview.min.js"></script>
+    <style>
+        body { margin: 0; background-color: #2b2b2b; font-family: Segoe UI, sans-serif; color: white; }
+        #container { margin: 15px auto; max-width: 900px; background: #ffffff; color: #000; padding: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); min-height: 80vh; }
+        .placeholder { color: #888; text-align: center; font-size: 1.2rem; margin-top: 100px; }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <div class="placeholder">Please click "Load Word Document" above to select a file.</div>
+    </div>
+
+    <script>
+        async function renderLocalDocx(fileName) {
+            const container = document.getElementById("container");
+            container.innerHTML = "Loading document...";
+
+            try {
+                // Fetch the file using query parameter to bypass browser cache
+                const response = await fetch(fileName + "?t=" + new Date().getTime());
+                const blob = await response.blob();
+
+                container.innerHTML = "";
+                await docx.renderAsync(blob, container);
+            } catch (err) {
+                container.innerHTML = "<b style='color:red;'>Error rendering document:</b> " + err.message;
+            }
+        }
+    </script>
+</body>
+</html>

examples/JS_Lib/excelviewer/index.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Excel Viewer</title>
+    <!-- Local SheetJS Library -->
+    <script src="js/xlsx.full.min.js"></script>
+    <style>
+        body { 
+            margin: 0; 
+            padding: 0; 
+            background-color: #2b2b2b; 
+            color: white; 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+            display: flex; 
+            flex-direction: column; 
+            height: 100vh; 
+        }
+
+        #toolbar { 
+            background-color: #1e1e1e; 
+            padding: 8px 15px; 
+            border-bottom: 1px solid #3c3c3c; 
+            display: flex; 
+            gap: 10px; 
+            align-items: center; 
+        }
+
+        #sheet-tabs { 
+            display: flex; 
+            gap: 5px; 
+            overflow-x: auto; 
+        }
+
+        .tab-btn { 
+            background-color: #3c3c3c; 
+            color: #ccc; 
+            border: none; 
+            padding: 6px 12px; 
+            cursor: pointer; 
+            border-radius: 3px; 
+            font-size: 13px; 
+        }
+
+        .tab-btn.active { 
+            background-color: #107c41; /* Excel green */
+            color: white; 
+            font-weight: bold; 
+        }
+
+        #table-container { 
+            flex: 1; 
+            overflow: auto; 
+            padding: 15px; 
+        }
+
+        /* Table styling for Excel-like view */
+        table { 
+            border-collapse: collapse; 
+            background-color: #ffffff; 
+            color: #000000; 
+            min-width: 100%; 
+            font-size: 13px; 
+        }
+
+        th, td { 
+            border: 1px solid #d4d4d4; 
+            padding: 6px 10px; 
+            text-align: left; 
+            white-space: nowrap; 
+        }
+
+        th { 
+            background-color: #f3f3f3; 
+            color: #333; 
+            font-weight: 600; 
+            position: sticky; 
+            top: 0; 
+        }
+
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        tr:hover { background-color: #e8f4ec; }
+
+        .placeholder { color: #888; text-align: center; font-size: 1.2rem; margin-top: 100px; }
+    </style>
+</head>
+<body>
+
+    <div id="toolbar">
+        <span>Worksheets:</span>
+        <div id="sheet-tabs"></div>
+    </div>
+
+    <div id="table-container">
+        <div id="output">
+            <div class="placeholder">Please click "Load Excel Document" above to select a file.</div>
+        </div>
+    </div>
+
+    <script>
+        let workbook = null;
+
+        // Called dynamically from AutoIt
+        async function renderLocalXlsx(fileName) {
+            const output = document.getElementById("output");
+            output.innerHTML = "Loading document...";
+
+            try {
+                // Fetch the file with query parameter to bypass browser cache
+                const response = await fetch(fileName + "?t=" + new Date().getTime());
+                const arrayBuffer = await response.arrayBuffer();
+
+                // Parse Excel Workbook using SheetJS
+                workbook = XLSX.read(arrayBuffer, { type: 'array' });
+
+                // Render Sheet Tabs
+                renderTabs();
+
+                // Render First Sheet by default
+                if (workbook.SheetNames.length > 0) {
+                    renderSheet(workbook.SheetNames[0]);
+                }
+            } catch (err) {
+                output.innerHTML = "<b style='color:red;'>Error rendering document:</b> " + err.message;
+            }
+        }
+
+        function renderTabs() {
+            const container = document.getElementById('sheet-tabs');
+            container.innerHTML = '';
+
+            workbook.SheetNames.forEach((sheetName, index) => {
+                const btn = document.createElement('button');
+                btn.className = 'tab-btn' + (index === 0 ? ' active' : '');
+                btn.innerText = sheetName;
+                btn.onclick = () => {
+                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    renderSheet(sheetName);
+                };
+                container.appendChild(btn);
+            });
+        }
+
+        function renderSheet(sheetName) {
+            const worksheet = workbook.Sheets[sheetName];
+            const htmlTable = XLSX.utils.sheet_to_html(worksheet, { id: 'excel-table', editable: false });
+            document.getElementById('output').innerHTML = htmlTable;
+        }
+    </script>
+</body>
+</html>