Использование диалогового окна сохранения в рендерере с контекстной изоляцией

#electron

Вопрос:

Мне нужно иметь возможность открыть диалоговое окно сохранения в моем приложении electron. Поскольку удаленный модуль теперь рекомендуется не использовать в рендерере, мне трудно заставить это работать. Я использую сценарий предварительной загрузки для настройки IPC api для выполнения некоторых задач, для которых я когда-то использовал удаленный модуль. Однако я не хочу использовать сообщение IPC для открытия диалоговых окон сохранения.

Я бы предположил, что мне следует просто импортировать удаленный модуль в мой сценарий предварительной загрузки и добавить объект диалога в окно, чтобы я мог использовать его в средстве визуализации. Это, похоже, не работает, и удаленный не определен.

Каков правильный способ открыть диалоговые окна сохранения/открытия для средства визуализации сейчас?

main.js

 const mainWindow = new BrowserWindow({  width: 800,  height: 600,  webPreferences: {  nodeIntegration: false,  contextIsolation: true,  worldSafeExecuteJavaScript: true,  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,  },  });  

preload.js

 import { ipcRenderer, contextBridge, remote } from 'electron';  console.log(remote); // undefined  contextBridge.exposeInMainWorld('electron', {  API: ...,  dialog: remote.dialog, });  

Импорт всего электронного и журналирования, у которого нет удаленного объекта. Я также попытался добавить «enableRemoteModule: true», но это тоже не сработало.

Комментарии:

1. Вам не нужен пульт дистанционного управления. Попробуй dialog

Ответ №1:

Используйте для этого IPC. Отправьте действие из средства визуализации в Главное, которое вы хотите открыть в диалоговом окне. Main прослушивает это сообщение и открывает диалоговое окно из основного процесса.

Визуализатор

 import { ipcRenderer, contextBridge } from 'electron';  contextBridge.exposeInMainWorld('electron', {  API: ...,  openDialog: () =gt; {  ipcRenderer.send('open-dialog') // adjust naming for your project  },  // Provide an easier way to listen to events  on: (channel: string, callback: Function) =gt; {  ipcRenderer.on(channel, (_, data) =gt; callback(data));  }, });  

В случае DOM:

 window.electron.openDialog(); window.electron.on('on-file-select', (path) =gt; {  console.log(path) })  

Главная

 let mainWindow;  function createWindow() {  mainWindow = new BrowserWindow({  width: 800,  height: 600,  webPreferences: {  nodeIntegration: false,  contextIsolation: true,  worldSafeExecuteJavaScript: true,  preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,  },  }); }  function registerListeners() {  ipcMain.on('open-dialog', (event) =gt; {  dialog  .showOpenDialog(mainWindow!, {  properties: ['openFile']  })  .then(({ filePaths }) =gt; {  if (filePaths.length) {  event.reply('on-file-select', filePaths[0]);  }  });  }) }  app  .on('ready', createWindow)  .whenReady()  .then(registerListeners)  

Комментарии:

1. Диалоговое окно также не определено

2. Хорошо. Позвольте мне немного поиграть с electron, и я отредактирую свой ответ. Что вы хотите сделать в процессе визуализации?

3. Мне просто нужно иметь возможность получить местоположение файла сохранения. Если разобраться в этом подробнее, то, похоже, мне придется создать свой собственный ipc-обмен сообщениями и открыть его из основного процесса, а затем передать результаты обратно?

4. @JoeJankowiak Да, я бы тоже так сделал.

5. @JoeJankowiak Я обновил ответ с учетом ваших потребностей