electron 读取文件夹内容_如何使用Electron Framework选择，读取，保存，删除或创建文件...
本文概述
為了處理文件(CRUD)的生命周期, 我們將使用對(duì)話框和文件系統(tǒng)組件。
對(duì)話框模塊提供了用于顯示本機(jī)系統(tǒng)對(duì)話框(例如打開(kāi)文件或警報(bào))的API, 因此Web應(yīng)用程序可以提供與本機(jī)應(yīng)用程序和Node.js文件系統(tǒng)相同的用戶體驗(yàn)。
加載所需的依賴項(xiàng)
我們需要加載以下依賴項(xiàng), 以執(zhí)行我們要完成的任務(wù), 例如保存, 打開(kāi)刪除等, 包括”操作系統(tǒng)”對(duì)話框。
var remote = require('remote'); // Load remote compnent that contains the dialog dependency
var dialog = remote.require('dialog'); // Load the dialogs component of the OS
var fs = require('fs'); // Load the File System to execute our common tasks (CRUD)
注意
在最新版本的Electron(> = 1)中, 請(qǐng)使用以下代碼段訪問(wèn)對(duì)話框。
var app = require('electron').remote;
var dialog = app.dialog;
// Or with ECMAScript 6
const {dialog} = require('electron').remote;
建立檔案
要?jiǎng)?chuàng)建文件, 我們將使用文件系統(tǒng), 在這種情況下, 將使用系統(tǒng)的本機(jī)保存文件對(duì)話框(以檢索路徑)。你可以使用
let content = "Some text to save into the file";
// You can obviously give a direct path without use the dialog (C:/Program Files/path/myfileexample.txt)
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){
console.log("You didn't save the file");
return;
}
// fileName is a string that contains the path and filename created in the save file dialog.
fs.writeFile(fileName, content, (err) => {
if(err){
alert("An error ocurred creating the file "+ err.message)
}
alert("The file has been succesfully saved");
});
});
讀取文件內(nèi)容
要讀取文件路徑, 我們還將使用文件系統(tǒng)和本機(jī)讀取文件對(duì)話框。
dialog.showOpenDialog((fileNames) => {
// fileNames is an array that contains all the selected
if(fileNames === undefined){
console.log("No file selected");
return;
}
fs.readFile(filepath, 'utf-8', (err, data) => {
if(err){
alert("An error ocurred reading the file :" + err.message);
return;
}
// Change how to handle the file content
console.log("The file content is : " + data);
});
});
// Note that the previous example will handle only 1 file, if you want that the dialog accepts multiple files, then change the settings:
// And obviously , loop through the fileNames and read every file manually
dialog.showOpenDialog({
properties: [
'openFile', 'multiSelections', (fileNames) => {
console.log(fileNames);
}
]
});
更新現(xiàn)有文件內(nèi)容
要更新現(xiàn)有文件, 我們僅需要使用以下代碼的文件路徑(如果需要再次使用filedialog或使用先前保存的文件路徑, 則可以檢索該文件路徑)：
var filepath = "C:/Previous-filepath/existinfile.txt";// you need to save the filepath when you open the file to update without use the filechooser dialog againg
var content = "This is the new content of the file";
fs.writeFile(filepath, content, (err) => {
if (err) {
alert("An error ocurred updating the file" + err.message);
console.log(err);
return;
}
alert("The file has been succesfully saved");
});
刪除檔案
要?jiǎng)h除文件, 你只需要文件的路徑并使用exist和unlink方法。 exist方法檢查文件是否存在, 然后使用unlink方法刪除該文件。
var filepath = "C:/Path-toFile/file.txt";// Previously saved path somewhere
if (fs.existsSync(filepath)) {
fs.unlink(filepath, (err) => {
if (err) {
alert("An error ocurred updating the file" + err.message);
console.log(err);
return;
}
console.log("File succesfully deleted");
});
} else {
alert("This file doesn't exist, cannot delete");
}
很簡(jiǎn)單不是嗎？
選擇一個(gè)文件夾
你可以使用對(duì)話框選擇一個(gè)文件夾, 以檢索文件夾路徑：
dialog.showOpenDialog({
title:"Select a folder", properties: ["openDirectory"]
}, (folderPaths) => {
// folderPaths is an array that contains all the selected paths
if(fileNames === undefined){
console.log("No destination folder selected");
return;
}else{
console.log(folderPaths);
}
});
完整的工作示例
以下html文件可用于在你的項(xiàng)目中進(jìn)行測(cè)試, 以了解文件系統(tǒng)的工作方式。該代碼將生成一個(gè)簡(jiǎn)單的Crud UI。
Our Code WorldThe file content will be the same as the editor.
var remote = require('remote');
var dialog = remote.require('dialog');
var fs = require('fs');
document.getElementById('select-file').addEventListener('click', function(){
dialog.showOpenDialog(function (fileNames) {
if(fileNames === undefined){
console.log("No file selected");
}else{
document.getElementById("actual-file").value = fileNames[0];
readFile(fileNames[0]);
}
});
}, false);
document.getElementById('save-changes').addEventListener('click', function(){
var actualFilePath = document.getElementById("actual-file").value;
if(actualFilePath){
saveChanges(actualFilePath, document.getElementById('content-editor').value);
}else{
alert("Please select a file first");
}
}, false);
document.getElementById('delete-file').addEventListener('click', function(){
var actualFilePath = document.getElementById("actual-file").value;
if(actualFilePath){
deleteFile(actualFilePath);
document.getElementById("actual-file").value = "";
document.getElementById("content-editor").value = "";
}else{
alert("Please select a file first");
}
}, false);
document.getElementById('create-new-file').addEventListener('click', function(){
var content = document.getElementById("content-editor").value;
dialog.showSaveDialog(function (fileName) {
if (fileName === undefined){
console.log("You didn't save the file");
return;
}
fs.writeFile(fileName, content, function (err) {
if(err){
alert("An error ocurred creating the file "+ err.message)
}
alert("The file has been succesfully saved");
});
});
}, false);
function readFile(filepath) {
fs.readFile(filepath, 'utf-8', function (err, data) {
if(err){
alert("An error ocurred reading the file :" + err.message);
return;
}
document.getElementById("content-editor").value = data;
});
}
function deleteFile(filepath){
fs.exists(filepath, function(exists) {
if(exists) {
// File exists deletings
fs.unlink(filepath, function(err){
if(err){
alert("An error ocurred updating the file"+ err.message);
console.log(err);
return;
}
});
} else {
alert("This file doesn't exist, cannot delete");
}
});
}
function saveChanges(filepath, content){
fs.writeFile(filepath, content, function (err) {
if(err){
alert("An error ocurred updating the file"+ err.message);
console.log(err);
return;
}
alert("The file has been succesfully saved");
});
}
玩得開(kāi)心 ！
總結(jié)
以上是生活随笔為你收集整理的electron 读取文件夹内容_如何使用Electron Framework选择，读取，保存，删除或创建文件...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vba中find用法
- 下一篇： J storm战队成员_DOTA2J.S