如何使用 electron 中的文件對話框？

Question

我是 electron 的新手，我正在嘗試打開一個文件對話框，讓用戶 select 使用以下代碼訪問特定文件：

const {remote} = require("remote");
const {dialog} = require('electron').remote;

function openFileDialog() {
    const savePath = dialog.showSaveDialog();
    console.log(savePath)
}

但是，當我嘗試此操作時，控制台中出現錯誤消息：

未捕獲的類型錯誤：無法讀取未定義的屬性“showSaveDialog”。

有誰知道我做錯了什么？

編輯：我現在正在使用這段代碼，如下所示：

var remote = require("remote");
var dialog = require('dialog').remote; 

function openFileDialog() {
    const savePath = dialog.showSaveDialog(null);
    console.log(savePath)
}

在我使用以下代碼調用的名為 settings.js 的文件中：

<input class="btn btn-dark" type="button" value="Input" onclick="openFileDialog();">

我使用以下代碼導入腳本：

   <script src="./../javascript/settings.js"></script>

我試過有和沒有遙控器。 我仍然得到同樣的錯誤

Answer 1

如果您在main進程中使用它，這應該可以工作，如果您想從renderer進程中使用它：

const { dialog } = require('electron').remote;

此外，最好在腳本中定義event-handler 。 這是一個功能示例：

<input class="btn btn-dark" type="button" value="Input" id="dialogBtn">

const { dialog } = require('electron').remote;

document.getElementById("dialogBtn").addEventListener("click", openFileDialog);

async function openFileDialog() {
  try {
    const savePath = await dialog.showSaveDialog(null);
    console.log('savePath: ', savePath);
  } catch (e) {
    console.log('Error:', e);
  }
}

Answer 2

我剛剛使用這些代碼解決了它。 第一個問題是我需要啟用 remoteModule enableRemoteModule: true,然后我需要使用以下代碼等待 DOM 加載：

window.onload=function(){
    document.getElementById("dialogBtn").addEventListener("click", openFileDialog);
}

感謝 Majed Badawi 的幫助！