将 JavaScript 对象从主进程发送到渲染器进程以填充 HTML 表电子

Question

我正在使用HTML，CSS和JavaScript与Electron编写库存管理应用程序。我遇到了一些障碍。当我打开一个 JSON 文件时，其中包含我要用于填充应用程序中的 HTML 表的数据，该文件将在 main 中打开并处理处理.js这是我的应用程序的主要进程。我需要做的是将处理后的JavaScript对象发送到index.js(我的渲染器进程(以便能够填充HTML表。

主.js：

const { app, BrowserWindow, Menu } = require('electron');
const { dialog } = require('electron');
const fs = require('fs');
let appWindow;
let fileContents;
function createWindow() {
appWindow = new BrowserWindow({width: 1100, height: 769});
appWindow.loadFile('index.html');
appWindow.webContents.openDevTools();
const template = 
[
{ 
label: 'File',
submenu: 
[
{
label: 'Open', 
accelerator: 'Ctrl+O', 
click: () => {
console.log("Open was pressed!");
let inventoryData = dialog.showOpenDialog(appWindow, {
title: "Open Inventory Data", 
buttonLabel: "Open File",
filters: 
[
{
name: 'JSON',
extensions: ['json']
}
],
properties: 
[ 
'openFile', 
'showHiddenFiles' 
]
}, (filePaths, bookmarks) => {

filePaths.forEach((value, index, array) => {
fs.readFile(value, 'utf-8', (err, data) => {
if(err) {
throw err;
}
fileContents = JSON.parse(data);
});
});
});
}
},
{
label: 'Save', 
accelerator: 'Ctrl+S', 
click: () => {
console.log("Save was pressed!");
}
},
{
label: 'Merge', 
accelerator: 'Ctrl+M', 
click: () => {
console.log("Merge was pressed!");
}
}
]
}
];
if(process.platform === 'darwin') {
template.unshift({
label: 'Inventory Manager',
submenu: 
[
{
label: 'About Inventory Manager', 
role: 'about'
}, 
{
type: 'separator'
},
{
label: "Quit Inventory Manager", 
role: 'quit'
}
]
});
}
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
appWindow.on('closed', () => {
appWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if(appWindow === null) {
createWindow();
}
});

Answer 1

每个MenuItem都有以下click回调签名：

click(menuItem, browserWindow, event)

因此，您可以使用browserWindow参数并修改模板以使用 ipc 将数据发送回渲染器进程或直接在 html 中运行 js：

...
label: 'Open', 
accelerator: 'Ctrl+O', 
click: (menuItem, browserWindow, event) => {
let inventoryData = dialog.showOpenDialog(appWindow, {
...
}, (filePaths, bookmarks) => {
...
fileContents = JSON.parse(data)
// #1 ipc (recommended)
browserWindow.webContents.send('populate-table', fileContents)
// #2 execute js
browserWindow.webContents.executeJavaScript(`
document.populateTable(fileContents) // whatever u have
`)
});
}
...