Eintrag

Electron Dateisystem

Veröffentlicht
Von Christian Böhm
3 Minuten Lesezeit

Einleitung

Ein einfaches Beispiel wie du in Electron Dateien speichern, öffnen und löschen kannst. Dabei wird beim speichern und löschen jeweils das fs-Modul und beim laden das remote-Modul genutzt. Ich habe den Code zum besseren Verständnis ausführlich kommentiert.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Dateien - save, load, delete</title>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="fileName">Name</label>
        <input class="form-control" id="fileName" type="text"></input>
      </div>
      <div class="form-group">
        <label for="content">Inhalt</label>
        <textarea class="form-control" id="content" rows="6"></textarea>
      </div>
    </form>
    <button id="saveFile" type="button" class="btn btn-info">speichern</button>
    <button id="loadFile" type="button" class="btn btn-info">laden</button>
    <button id="deleteFile" type="button" class="btn btn-info">löschen</button>
    <script src="js/routing.js"></script>
  </body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// Modules to control application life and create native browser window
const { app, BrowserWindow, dialog} = require("electron");
const { MenuItem } = require("electron/main");
const remote = require('@electron/remote/main')
remote.initialize()
const path = require("node:path");

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    icon: "assets/icons/app_icon.png",
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    },
  })

  remote.enable(mainWindow.webContents)
  mainWindow.loadFile("src/index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

routing.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

const { app, BrowserWindow, ipcRenderer} = require('electron');

// Module importieren
const fs = require('fs')
const path = require('path')
const remote = require('@electron/remote')
const dialog = remote.dialog

// Definierten Pfad vorgeben
let pathName = path.join(__dirname, "/../assets")

// Verknüpfen der Buttons mit den Konstanten
const fileName = document.getElementById('fileName')
const content = document.getElementById('content')
const saveFile = document.getElementById('saveFile')
const loadFile = document.getElementById('loadFile')
const deleteFile = document.getElementById('deleteFile')

// Datei speichern mit dem fs-Modul
saveFile.addEventListener('click', function(){
    // Definition des Dateipfads (definierter Pfad + Dateiname aus Formular) 
    let file = path.join(pathName, fileName.value)
    // Dateiinhalt aus dem Feld in Variable speichern
    let contentFile = content.value
    // Speichervorgang mittels fs-Modul
    // Dateipfad inkl. Dateiname + Dateiinhalt + Fehlerbehandlung
    fs.writeFile(file, contentFile, function(err){
        if (err){
            console.log(err)
        }
        console.log("Datei wurde gespeichert!")
    })
})

// Datei laden mit dem remote-Modul
loadFile.addEventListener('click', function() {
    // Dialogbox (showOpenDialog) vom remote-Modul aufrufen
    dialog.showOpenDialog(remote.getCurrentWindow(),{
        properties: ["openFile"],
        // vorgeben der erlaubten Dateitypen
        filters: [{name: 'Texte', extensions: ['txt','md']}]
    }).then(result =>{
        // Abfrage, ob Vorgang abgebrochen wurde
        if (result.canceled === false){
            // result.filePaths gibt Array mit den Dateipfaden zurück
            let pathName = result.filePaths[0]
            
            // Datei einlesen
            fs.readFile(pathName, function(err, fileContent){
                if(err){
                    return console.log(err)
                }
                // mit den eingelesenen Daten die Felder im Formular füllen
                content.value = fileContent.toString()
                fileName.value = path.basename(result.filePaths[0])
            })
        }
    }).catch(err=>{
        console.log(err)
    })
})

// Datei löschen mit dem fs-Modul
deleteFile.addEventListener('click', function(){
    // Dateipfad definieren
    let file = path.join(pathName, fileName.value)
    
    // löscht Datei
    fs.unlink(file, function(err){
        if (err){
            console.log(err)
        }
        // leeren der Formulardaten
        fileName.value = ''
        content.value = ''
    })
})
Programmierung
Electron Dateien Remote
Dieser Eintrag ist vom Autor unter CC BY 4.0 lizensiert.