在 ElectronJS 中保存文件

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS组合成一个单一的运行时。

任何本机桌面应用程序都应将自身与系统操作系统环境集成。应用程序应该能够与核心操作系统功能进行交互，例如文件系统、系统托盘等。Electron 为我们提供了内置的对话框模块来显示与文件交互的本机系统对话框。本教程将使用对话框模块的实例方法来演示如何在 Electron 中本地保存文件。

我们假设您熟悉上述链接中涵盖的先决条件。为了使 Electron 正常工作，需要在系统中预先安装node和npm 。

对话框模块：对话框模块是Main Process的一部分。要在渲染器进程中导入和使用对话框模块，我们将使用 Electron远程模块。有关远程模块的更多详细信息，请参阅此链接。

项目结构：

示例：我们将首先按照给定的步骤构建用于将文件保存到本地系统的电子应用程序。

第 1 步：导航到空目录以设置项目，然后运行以下命令。
```
npm init
```
生成package.json文件。如果没有安装Electron ，请使用 npm 安装。
```
npm install electron --save
```
此命令还将创建package-lock.json文件并安装所需的node_modules依赖项。根据项目结构创建assets文件夹。我们将从本机对话框中将新文件保存到此文件夹中。
包.json：
```
{
  "name": "electron-save",
  "version": "1.0.0",
  "description": "Save Files to local in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5"
  }
}
```

第二步：根据项目结构创建main.js文件。该文件是主进程并充当应用程序的入口点。复制以下链接中给出的main.js文件的样板代码。我们已经修改了代码以满足我们的项目需求。

主.js：

const { app, BrowserWindow } = require('electron')
  
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  // Load the index.html of the app.
  win.loadFile('src/index.html')
  
  // Open the DevTools.
  win.webContents.openDevTools()
}
  
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// This method is equivalent to 'app.on('ready', function())'
app.whenReady().then(createWindow)
  
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
  
app.on('activate', () => {
    // On macOS it's common to re-create a window in the 
    // app when the dock icon is clicked and there are no 
    // other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  
// In this file, you can include the rest of your 
// app's specific main process code. You can also 
// put them in separate files and require them here.

第三步：在src目录下创建index.html文件和index.js文件。我们还将从上述链接复制index.html文件的样板代码。我们已经修改了代码以满足我们的项目需求。

索引.html：



  
    
    Hello World!
    
    
  
  
    Hello World!
    We are using node 
    , Chrome 
    , and Electron 
    .

输出：此时，我们的应用程序已设置好，我们可以启动应用程序来检查 GUI 输出。要启动 Electron 应用程序，请运行以下命令：

npm start

图形用户界面输出

第 4 步： Save sample.txt to local System按钮还没有任何关联的功能。
index.js：在该文件中添加以下代码段。

const electron = require('electron');
const path = require('path');
const fs = require('fs');
// Importing dialog module using remote
const dialog = electron.remote.dialog;
  
var save = document.getElementById('save');
  
save.addEventListener('click', (event) => {
    // Resolves to a Promise