Then create a index.js and add listener click save button, and send data input to electron main.js with ipcRenderer, on ipcRenderer we will name the channel save-file:
const { ipcRenderer } = require('electron');
const saveButtonElement = document.querySelector('#save-button');
const inputElement = document.querySelector('#main-text');
saveButtonElement.addEventListener('click', () => {
const content = inputElement.value;
ipcRenderer.send('save-file', content);
});
Since Electron applications consist of two main processes: the main process (which manages the UI and other system-level tasks) and multiple renderer processes (which display web pages), there's a need for these processes to communicate with each other.
IPC in Electron refers to the mechanisms and techniques used to facilitate communication between the main process and renderer processes, as well as between different renderer processes. Since these processes are separate instances and don't share the same memory space, IPC is necessary to exchange data and trigger actions between them.
On main.js (main file of electron.js project) make sure you set nodeIntegration true and contextIsolation false:
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
If you not set code above you will get error Uncaught ReferenceError: require is not defined, because require function it's not available in standard browser-based JavaScript environments.
Then add a listener to receive the data from index.js, make sure the channel name same with channel in index.js (save-file), in main.js:
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
...
ipcMain.on('save-file', (event, content) => {
const options = {
title: 'Save File',
filters: [{ name: 'CodeLink Files', extensions: ['cl'] }]
};
dialog.showSaveDialog(options).then(result => {
if (!result.canceled) {
fs.writeFileSync(result.filePath, content);
}
});
});
...
In the code above when we receive data, we will display a dialog to choose where the file will be saved, you can change the name and extension to what you want.
until here we can already save the file, next we will make the saved file can open in explore, first we need add file associations in package.json to set the extensions that can be opened by the application and set build option for application:
"build": {
"appId": "com.codelink.electron",
"productName": "CodeLink App",
"directories": {
"output": "dist"
},
"fileAssociations": [
{
"ext": "cl",
"name": "CodeLink",
"role": "Editor"
}
],
"nsis": {
"perMachine": true
}
}
When you open the application from a saved file, the saved file path will be in process.argv[1], so we need to read the file from the path when the DOM is ready and send data to UI, in main.js:
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false
}
})
win.loadFile('./src/rendered/index.html');
win.webContents.on('dom-ready', () => {
if (process.argv.length >= 2) {
const fileDir = process.argv[1];
const fileContent = fs.readFileSync(fileDir, 'utf8');
win.webContents.send('load-file', fileContent);
}
});
}
Then add a listener to receive the data from main.js and change input value to loaded data in index.js:
const { ipcRenderer } = require('electron');
...
const inputElement = document.querySelector('#main-text');
ipcRenderer.on('load-file', (event, content) => {
inputElement.value = content;
});
...
Now we just need to build the application. For build electron application we need to install electron-builder
npm install electron-builder --save-dev
Add this line in package.json:
"scripts": {
...
"build": "electron-builder"
},
Run this command to build your application:
npm run build
Full Code:
Thanks for reading this post, i hope this post can be useful, if you have question or feedback, you can send message in Contact or leave a comment.
0 Comments