Electron Datei Öffnen und Inhalt in Script übergeben?
Ich möchte in meinem Electron Programm im Menü die Möglichkeit bieten eine Datei zu öffnen. Die Datei enthält JSON. Ich möchte den Inhalt dann in meinem Script weiterverarbeiten um ihn anzuzeigen. Das ist mein Code bis jetzt:
main.js
const { app, BrowserWindow, Menu } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
Menu.setApplicationMenu(mainMenu);
mainWindow.loadFile(path.join(__dirname, "src/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();
}
});
menu.js
const { app, Menu, dialog } = require('electron');
const fs = require('fs');
const template = [
{
label: 'Datei',
submenu: [
{
label: 'Öffnen',
accelerator: 'CmdOrCtrl+O',
click: async () => {
const files = await dialog.showOpenDialog({
properties: ['openFile'],
filters: [
{ name: 'Json', extensions: ['json'] },
{ name: 'Alle Dateien', extensions: ['*'] }
]
});
if (!files || files.canceled || files.filePaths.length === 0) return
const file = files.filePaths[0];
const fileContent = fs.readFileSync(file, 'utf-8');
console.log(fileContent);
}
}
]
}
]
module.exports.mainMenu = Menu.buildFromTemplate(template);
index.html (src/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Seite</h1>
<script>
console.log(data);
</script>
</body>
</html>
Wie kann ich das umsetzten? Ich habe schon von IPC gelesen, es aber nicht wirklich verstanden.
1 Antwort
Um den Inhalt der geöffneten Datei an Ihre Renderer-Prozesse zu übergeben, können Sie die Inter-Process Communication (IPC) in Electron verwenden. Dazu müssen Sie folgende Schritte durchführen:
- Ändern Sie Ihre
main.js- Datei wie folgt:
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
const { mainMenu } = require('./menu');
const path = require('path');
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
// Aktivieren Sie die nodeIntegration, um auf das ipcMain-Modul zugreifen zu können
nodeIntegration: true
},
});
Menu.setApplicationMenu(mainMenu);
mainWindow.loadFile(path.join(__dirname, "src/index.html"));
// Hinzufügen eines IPC-Listeners, um den Dateiinhalt an den Renderer-Prozess zu senden
ipcMain.on('fileContent', (event, content) => {
mainWindow.webContents.send('fileContent', content);
});
};
// ...
- In Ihrer
menu.js- Datei, rufen Sie den
ipcRenderer- in der Renderer-Prozess-Datei auf und senden den Dateiinhalt an den Hauptprozess:
const { app, Menu, dialog, ipcRenderer } = require('electron');
const fs = require('fs');
const template = [
{
label: 'Datei',
submenu: [
{
label: 'Öffnen',
accelerator: 'CmdOrCtrl+O',
click: async () => {
const files = await dialog.showOpenDialog({
properties: ['openFile'],
filters: [
{ name: 'Json', extensions: ['json'] },
{ name: 'Alle Dateien', extensions: ['*'] }
]
});
if (!files || files.canceled || files.filePaths.length === 0) return;
const file = files.filePaths[0];
const fileContent = fs.readFileSync(file, 'utf-8');
// Senden Sie den Dateiinhalt an den Hauptprozess
ipcRenderer.send('fileContent', fileContent);
}
}
]
}
]
// ...
- In Ihrer
index.html- Datei, fügen Sie einen Listener hinzu, um den Dateiinhalt vom Hauptprozess zu empfangen und ihn in Ihrer Seite anzuzeigen:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<h1>Seite</h1>
<script>
const { ipcRenderer } = require('electron');
ipcRenderer.on('fileContent', (event, content) => {
console.log(content); // Konsolenausgabe des Dateiinhalts
// Hier können Sie den Inhalt der Datei in Ihrem HTML-Dokument anzeigen oder weiterverarbeiten
});
</script>
</body>
</html>
Durch diese Änderungen sollte der Inhalt der geöffneten Datei im Renderer-Prozess verfügbar sein und Sie können ihn in Ihrem HTML-Dokument anzeigen oder weiterverarbeiten.