Question

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

main.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将数据发送回Renderer进程，或直接在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
      `)
    });
}
...

将JavaScript对象从主进程发送到渲染器进程以填充HTML Table Electron

1 个答案: