I need to show an excel file on a dialog. Can this be done ?
Board index FiveWin for Harbour/xHarbour Excel file on a dialog
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>Thank you, Antonio ! Great solution !!!
Antonio, how can I open a specific document (C:\MyFile.xlsx) in webview ?
This should should work:
webviewexcel.prg
webviewexcel.prg
#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 cHtmlSorry, I don't understand. This example does not allow to open the file C:\MyFile.xlsx
This version is working fine here:
#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 cHtmlWhen 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() ?
Is it possible to get properties of WebView object via GetProp(), GetPropA() ?
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.
:D
read it from webpage.
:D
Regards,
Lailton Fernando Mariano
Lailton Fernando Mariano
Natter wrote: When I select a file I get the message "Error reading file" (maybe I have an old version of WebView).Please double check that you are using https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js
Is it possible to get properties of WebView object via GetProp(), GetPropA() ?
Here it works very fine :)
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 ) andLailton, could you give me a small example?
read it from webpage.
Dear Yuri,
Please email me your excel file and I will provide you a screenshot and the EXE