Electron中常用對話框-打開文件對話框、保存文件對話框、提示對話框

場景

用HTML和CSS和JS構建跨平台桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試后，那么Electron有哪些常用的對話框。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

打開文件對話框

首先在index.html中增加一個Button按鈕，並添加id

<button id="openDialog">打開</button>

然后在js中，通過id獲取按鈕並設置其點擊事件

var btnOpenDialog=document.getElementById('openDialog');
btnOpenDialog.onclick = OpenDialog;

這個對話框是從Electron的主線程上打開的。如果要使用渲染器進程中的對話框對象, 可以使用remote來獲得

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

然后在上面的OpenDialog方法中

function OpenDialog()
{
    dialog.showOpenDialog({
        title: "請選擇您喜歡的文件",
        buttonLabel: "走你",
        filters: [
            { name: 'Custom File Type', extensions: ['js', 'html', 'json'] },
          ]
    }).then(result => {
        console.log(result.canceled)
        console.log(result.filePaths)
      }).catch(err => {
        console.log(err)
      })
}

效果

 

 

選擇一個文件后查看控制台

 

 

showOpenDialog常用設置

屬性：

title String (可選)
defaultPath String (可選)
buttonLabel String (可選) - 「確認」按鈕的自定義標簽, 當為空時, 將使用默認標簽。
filters FileFilter[] (可選)

properties String[] (可選) -包含對話框應用的功能。支持以下值:
    openFile - 允許選擇文件
    openDirectory - 允許選擇文件夾
    multiSelections-允許多選。
    showHiddenFiles-顯示對話框中的隱藏文件。

返回值：

canceled：Boolean 對話框是否取消

filePaths:文件路徑

過濾文件選項：

指定一個文件類型數組，用於規定用戶可見或可選的特定類型范圍

{
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}

 

 

保存文件對話框

首先在index.html中增加一個Button按鈕，並添加id

<button id="saveDialog">保存</button>

然后在js中，通過id獲取按鈕並設置其點擊事件

var btnSaveDialog=document.getElementById('saveDialog');
btnSaveDialog.onclick = SaveDialog;

這個對話框是從Electron的主線程上打開的。如果要使用渲染器進程中的對話框對象, 可以使用remote來獲得

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

為了將內容存儲到文件中，還要引入fs

const fs = require('fs');

然后在上面的SaveDialog 方法中

function SaveDialog()
{
   
    dialog.showSaveDialog({
        title: "請選擇要保存的文件名",
        buttonLabel: "保存",
        filters: [
            { name: 'Custom File Type', extensions: ['js', 'html', 'json'] },
          ]
    }).then(result => {
        fs.writeFileSync(result.filePath, "公眾號：霸道的程序猿");
        console.log(result)
      }).catch(err => {
        console.log(err)
      })
    
}

效果

 

 

點擊確定后

 

 

就會將

 fs.writeFileSync(result.filePath, "公眾號：霸道的程序猿");

這句代碼中的后面的內容寫入文件中。

打開寫入后的js文件

 

 

 

showSaveDialog常用設置

屬性：

title String (可選)
defaultPath String (可選) - 默認情況下使用的絕對目錄路徑、絕對文件路徑或文件名。
buttonLabel String (可選) - 「確認」按鈕的自定義標簽, 當為空時, 將使用默認標簽。
filters FileFilter[] (可選)

properties String[] (可選) -包含對話框應用的功能。支持以下值:
    showHiddenFiles-顯示對話框中的隱藏文件。

返回值：

canceled：Boolean 對話框是否取消

filePaths:文件路徑

過濾文件選項：

指定一個文件類型數組，用於規定用戶可見或可選的特定類型范圍

{
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] }
  ]
}

 

提示對話框

首先在index.html中增加一個Button按鈕，並添加id

<button id="showMessageDialog">彈出消息提示</button>

然后在js中，通過id獲取按鈕並設置其點擊事件

var btnShowMessageDialog=document.getElementById('showMessageDialog');
btnShowMessageDialog.onclick = ShowMessageDialog;

這個對話框是從Electron的主線程上打開的。如果要使用渲染器進程中的對話框對象, 可以使用remote來獲得

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

然后在上面的ShowMessageDialog方法中

function ShowMessageDialog()
{
    
    dialog.showMessageBox({
        type: 'warning',
        title: "您確定么？",
        message: "您真的想要刪除這條數據么？",
        buttons: ["OK", "Cancel"]
    }).then(result => {
        console.log("您的選擇:" , result.response);
        console.log(result)
      }).catch(err => {
        console.log(err)
      })
}

效果

 

 

點擊確定和取消后查看輸出

 

 

ShowMessageDialog常用設置

屬性：

type

字符串（可選） -可以是"none"，"info"，"error"，"question"或"warning"。在Windows上，"question"顯示與圖標相同的圖標"info"，除非您使用該"icon"選項設置圖標。在MacOS，既"warning"和"error"顯示相同的警告圖標。

buttons

字符串 - 按鈕文本數組。在Windows上，一個空數組將導致一個標簽為“OK”的按鈕。

defaultId

整數（可選） - 按鈕陣列中按鈕的索引，當消息框打開時將默認選擇該按鈕。

title

字符串（可選） - 消息框的標題，某些平台不會顯示它。

message

 字符串 - 消息框的內容。

detail

字符串（可選） - 消息的額外信息。

checkboxLabel

字符串（可選） - 如果提供，消息框將包含一個帶給定標簽的復選框。復選框狀態只能在使用時檢查callback。

checkboxChecked

布爾（可選） - 復選框的初始選中狀態。false默認。

icon

NativeImage（可選）

cancelId

整數（可選） - 通過鍵用於取消對話框的按鈕索引Esc。默認情況下，將其分配給第一個按鈕，其中“取消”或“否”作為標簽。如果沒有這樣的標簽按鈕，並且沒有設置此選項，0則將用作返回值或回調響應。Windows上忽略此選項。

 

返回值：

response Number  - 被點擊的按鈕的索引
checkboxChecked布爾值 - checkboxLabel已設置復選框的選中狀態。否則false。