Excel file on a dialog

Natter · Post by **Natter** » Sun Apr 20, 2025 2:17 pm

I need to show an excel file on a dialog. Can this be done ?

Post by **Antonio Linares** » Sun Apr 20, 2025 4:06 pm

You may use a TWebView2 control and use this HTML code:

<input type="file" id="input" accept=".xlsx, .xls" />
<div id="output"></div>
<script src="https://cdn.sheetjs.com/xlsx-latest/xlsx.full.min.js"></script>
<script>
  document.getElementById("input").addEventListener("change", async (e) => {
    const file = e.target.files[0];
    const data = await file.arrayBuffer();
    const workbook = XLSX.read(data);
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    const html = XLSX.utils.sheet_to_html(firstSheet);
    document.getElementById("output").innerHTML = html;
  });
</script>

Natter · Post by **Natter** » Sun Apr 20, 2025 4:23 pm

Thank you, Antonio ! Great solution !!!

Natter · Post by **Natter** » Tue Apr 22, 2025 8:38 am

Antonio, how can I open a specific document (C:\MyFile.xlsx) in webview ?

Post by **Antonio Linares** » Tue Apr 22, 2025 9:03 am

This should should work:

webviewexcel.prg

Code: Select all | Expand

#include "FiveWin.ch"

function Main()

   local oWebView := TWebView2():New()

   oWebView:SetHtml( Html() )
   oWebView:SetTitle( "Microsoft Edge WebView working from FWH" )
   oWebView:SetUserAgent( "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Mobile Safari/537.36" )
   oWebView:Run()
   oWebView:End()

return nil

function Html()

   local cHtml

   TEXT INTO cHtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read Excel File</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        #output p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Upload and Display Excel File</h1>
    <input type="file" id="input" accept=".xlsx, .xls" />
    <div id="output"></div>

    <script src="https://cdn.sheetjs.com/xlsx-latest/xlsx.full.min.js"></script>
    <script>
        document.getElementById('input').addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (!file) return;
            try {
                const data = await file.arrayBuffer();
                const workbook = XLSX.read(data);
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                const html = XLSX.utils.sheet_to_html(firstSheet);
                document.getElementById('output').innerHTML = html;
            } catch (error) {
                console.error('Error reading file:', error);
                document.getElementById('output').innerHTML = '<p>Error reading file.</p>';
            }
        });
    </script>
</body>
</html>
   ENDTEXT

return cHtml

Natter · Post by **Natter** » Tue Apr 22, 2025 9:24 am

Sorry, I don't understand. This example does not allow to open the file C:\MyFile.xlsx

Post by **Antonio Linares** » Tue Apr 22, 2025 2:40 pm

This version is working fine here:

Code: Select all | Expand

#include "FiveWin.ch"

function Main()

   local oWebView := TWebView2():New()

   oWebView:SetHtml( Html() )
   oWebView:SetTitle( "Microsoft Edge WebView working from FWH" )
   oWebView:SetUserAgent( "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Mobile Safari/537.36" )
   // oWebView:OpenDevToolsWindow( .T. ) // Open DevTools
   oWebView:Run()
   oWebView:End()

return nil

function Html()

   local cHtml

   TEXT INTO cHtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read Excel File</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        #output p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Upload and Display Excel File</h1>
    <input type="file" id="input" accept=".xlsx, .xls" />
    <div id="output"></div>

    <script src=https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js></script>
    <script>
        document.getElementById('input').addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (!file) return;
            try {
                const data = await file.arrayBuffer();
                const workbook = XLSX.read(data);
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                const html = XLSX.utils.sheet_to_html(firstSheet);
                document.getElementById('output').innerHTML = html;
            } catch (error) {
                console.error('Error reading file:', error);
                document.getElementById('output').innerHTML = '<p>Error reading file.</p>';
            }
        });
    </script>
</body>
</html>
   ENDTEXT

return cHtml

Natter · Post by **Natter** » Wed Apr 23, 2025 8:25 am

When I select a file I get the message "Error reading file" (maybe I have an old version of WebView).

Is it possible to get properties of WebView object via GetProp(), GetPropA() ?

Post by **Lailton** » Wed Apr 23, 2025 8:03 pm

To load local files you can combine the BIND events and send some request from web page to the FWH take the file ( convert to base64 ) and
read it from webpage.

Post by **Antonio Linares** » Wed Apr 23, 2025 8:28 pm

Natter wrote: Wed Apr 23, 2025 8:25 am When I select a file I get the message "Error reading file" (maybe I have an old version of WebView).

Is it possible to get properties of WebView object via GetProp(), GetPropA() ?

Please double check that you are using https://cdn.sheetjs.com/xlsx-0.20.3/pac ... ull.min.js

Here it works very fine

Natter · Post by **Natter** » Thu Apr 24, 2025 8:27 am

To load local files you can combine the BIND events and send some request from web page to the FWH take the file ( convert to base64 ) and
read it from webpage.

Lailton, could you give me a small example?

Post by **Antonio Linares** » Thu Apr 24, 2025 11:57 am

Dear Yuri,

Please email me your excel file and I will provide you a screenshot and the EXE

FiveTech Software tech support forums

Excel file on a dialog

Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog

Re: Excel file on a dialog