 |
VOOZH | about |
|
VOOZH | about |
ElectronJs is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJs into a Single Runtime.
In certain desktop applications, developers would like to provide a feature wherein the user can download or print the contents from within the application. For example, in a banking application, the user would like to print his/her account statement being displayed on the screen. Electron, in addition to saving the contents as a PDF file, also provides a way by which we can directly print the contents using the BrowserWindow object and the webContents property. The webContents property provides us with certain Instance Events and methods by which we can either print the contents of the BrowserWindow Instance being displayed, print the contents of a remote URL or print a file from the local system. This tutorial will demonstrate how to print content in Electron.
We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.
Example: We will start by building the basic Electron Application by following the given steps.
Step 1: Navigate to an Empty Directory to setup the project, and run the following command,
npm init To generate the package.json file. Install Electron using npm if it is not installed. npm install electron --save This command will also create the package-lock.json file and install the required node_modules dependencies. Create the assets folder according to the project structure. package.json:{
"name": "electron-print",
"version": "1.0.0",
"description": "Print Files in Electron ",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [
"electron"
],
"author": "Radhesh Khanna",
"license": "ISC",
"dependencies": {
"electron": "^8.2.5"
}
}
Step 2: Create a main.js file according to the project structure. This file is the Main Process and acts as an entry point into the application. Copy the Boilerplate code for the main.js file as given in the following link. We have modified the code to suit our project needs. main.js:
const{app,BrowserWindow}=require('electron')
functioncreateWindow(){
// Create the browser window.
constwin=newBrowserWindow({
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.
Step 3: Create the index.html file and index.js file within the src directory. We will also copy the boilerplate code for the index.html file from the above-mentioned link. We have modified the code to suit our project needs. index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://www.electronjs.org/docs/latest/tutorial
/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>
document.write(process.versions.node)
</script>, Chrome
<script>
document.write(process.versions.chrome)
</script>, and Electron
<script>
document.write(process.versions.electron)
</script>.
<!-- Adding Individual Renderer Process JS File -->
<script src="index.js"></script>
</body>
</html>
Output: At this point, our basic Electron Application is set up. To launch the Electron Application, run the Command:
npm start👁 GUI OutputPrinting in Electron:The BrowserWindow Instance and webContents Property are part of the Main ProcessTo import and use BrowserWindow in the Renderer Process, we will be using Electron remote module. For more details on the remote module, Refer this link
Approach 1: Print the contents of the current active BrowserWindow Instance. The webContents.print(options, callback) method prints the BrowserWindow contents with Chromium's preview printing settings. This method implements a callback function. It takes in the following parameters. For more detailed information on webContents.print() method, Refer this link.
index.html: Add the following snippet in that file.
<br><br>
<button id="current">
Print Current Content of Page
</button>
BrowserWindow.getAllWindows(): This method returns an Array of active/opened BrowserWindow Instances. In this application, we have only one active BrowserWindow Instance and it can be directly referred from the Array as shown in the code.
BrowserWindow.getFocusedWindow(): This method returns the BrowserWindow Instance which is focused in the Application. If no current BrowserWindow Instance is found, it returns null. In this application, we only have one active BrowserWindow Instance and it can be directly referred using this method as shown in the code.
Printable Page:👁 Printed Page
Approach 2: Print the contents of a remote URL or a file from the local System by loading the contents in a BrowserWindow Instance. In this case we have created a new BrowserWindow Instance and set the show property to false. Hence the newly created window will never be shown. We have used the win.loadURL(path) method to load the contents of the External URL in the BrowserWindow. The url path can be a remote address specified by http:// protocol or a path to a file in the local System specified by using the file:// protocol. This method returns a Promise and it is resolved when the page has finished loading and the did-finish-load Event of webContents property is Emitted. For more detailed Information, Refer this link.
The did-finish-load Instance Event belongs to the webContents Property. It is emitted when the navigation is done and the page is completely loaded. This happens when the spinner of the page has stopped spinning, and the onload event has been dispatched. In case, this event emitter is not used and the webContents.print() method is called, the printed page will be a blank document since the content did not finish loading in the BrowserWindow. index.html: Add the following snippet in that file.
<br><br>
<button id="url">Print Google.com Homepage</button>
