Electronのdialog
5147 ワード
dialog
、ここではダイアログに訳されます.実行環境
ダイアログが開きます.ファイルを保存します.警告などがあります.Electronのダイアログは2種類あります.一つはメインプロセスで実行します.もう一つはレンダリングプロセスで実行します.
複数のファイルとディレクトリを選択できるダイアログ:
// main.js
const { dialog } = require('electron');
console.log(dialog.showOpenDialog({
properties: ['openFile', 'openDirectory', 'multiSelections']
}));
実際には、パラメータopenDirectory
を追加しない場合、ファイルとディレクトリを同時に複数選択することができますが、公式サイトの書き方では、複数のディレクトリしか選択できません.ファイルは選択できません.私はもうissueを提出しました.何かの助けがほしいです.
2010-07-08-13改正して、issueの中である人はこの問題に答えました.
https://electron.atom.io/docs/api/dialog/#methods Note:On Windows and Linux an open dialog can not be both a file selector and a directory selector,so if you set properties to[openFile],‘openDirectory’’on these plastforms,a directory selector will.shown.shown.
つまり、windowsとlinux環境では、ファイルが開いているダイアログは同時に設定できません.
上記のようなダイアログはメインプロセスで開きます.レンダリング中にダイアログを開くには、
remote
モジュールの呼び出しが必要です.// renderer.js
const { dialog } = electron.remote;
console.log(dialog);
ダイアログの使い方dialog.showOpenDialog([browserWindow, ]options[, callback])
ファイル操作ダイアログを開き、ファイルを保存して選択します.以下はボタンを押してファイルを選択し、ファイルの内容をページに読み込む例です.<button id="selectFile"> button>
<div id="fileContent">div>
// renderer.js
let electron = require('electron');
let fs = require('fs');
const { ipcRenderer } = electron;
const { dialog } = electron.remote;
document.getElementById('selectFile').addEventListener('click', function(e) {
// ,
dialog.showOpenDialog(null, {
// ,
properties: ['openFile', 'showHiddenFiles'],
// html, js, json, md
filters: [{
name: 'Text',
extensions: ['html', 'js', 'json', 'md']
}]
}, function(filenames) {
// filenames ,
let firstFile = filenames[0],
fileContentEle = document.getElementById('fileContent');
if (firstFile) {
fs.readFile(firstFile, 'utf8', function(err, data) {
if (err) {
// ,
dialog.showErrorBox('error', `read ${firstFile} error`);
return;
}
fileContentEle.innerText = data;
});
} else {
fileContentEle.innerText = 'no file selected';
}
});
},false);
上記の例では、nodejsのfsモジュールを導入してファイルの内容を読み取りました.つまり、nodeの中の他のモジュールは自由に使えます.ここではFileReaderを通じてファイルを読み込むこともできます.でも、nodeのモジュールをどう使うかをデモするためです.また、ファイルを選択せずにキャンセルした場合、
fileContentEle.innerText = 'no file selected';
のコードをトリガできません.どこの問題ですか?その他のいくつかの対話ウィンドウを開く方法は、使い方が似ています.具体的なパラメータは公式サイトの説明を見てもいいです.
参考:https://electron.atom.io/docs/api/dialog/
補足の指摘を歓迎します