0
0
sqltreat
answered Apr 24 '23 00:00
In an Electron JS application, you can use local files by loading them with the file:// protocol. Here's an example of how to load a local HTML file :
1.Create an HTML file named index.html in your project directory with some content, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2.In your main JavaScript file (e.g . main.js), create a BrowserWindow instance and specify the file :// URL of your index.html file:
js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadURL(`file://${path.join(__dirname, 'index.html')}`)
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
In the example above, the path module is used to construct the correct file path to the index.html file using the __dirname global variable . The loadURL() method is used to load the local file URL into the BrowserWindow instance.
Note that to use the file: // protocol, you may need to set the webPreferences.nodeIntegration option to true in your BrowserWindow configuration, to allow Node.js modules to be used in your local HTML file.
With this configuration, you can run your Electron application, and it should display the contents of your local HTML file.