In Electron API, there are some modules that can be accessed from both renderer process and main process. Clipboard is such module that is available in both processes. This module can be used to access the clipboard data, which is present inside the native operating system. It provides a rich set of API to manipulate the clipboard data. Here is a small example that writes the text content of a paragraph element in DOM to the clipboard on the click of a button:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
const { dialog, clipboard } = require('electron').remote;
window.onload = function () {
document.getElementById('btn').onclick = function () {
let el = document.getElementById('content');
clipboard.writeText(el.innerText);
dialog.showMessageBox({
type: 'info',
buttons: ['Ok'],
message: 'Text copied to the clipboard!',
});
};
};
</script>
</head>
<body>
<p id="content">
This element content will be copied to clipboard on click of the button
<button id="btn">Copy</button>
</p>
</body>
</html>
This writes a plain text in the clipboard. In a similar way, you can read text from the clipboard using the readText method, as follows:
const { clipboard } = require('electron');
// read the clipboard data as plain string
let clipboardData = clipboard.readText();
console.log(clipboardData);
You can read/write HTML, RTFText, and image to and from the clipboard data. For example, to read/write HTML data, the preceding example can be written, as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
const { dialog, clipboard } = require('electron').remote;
window.onload = function () {
document.getElementById('btn').onclick = function () {
let el = document.getElementById('content');
clipboard.writeHTML(el.innerHTML);
};
};
</script>
</head>
<body>
<p id="content">
This element content will be copied to clipboard on click of the button
<button id="btn">Copy</button>
</p>
</body>
</html>
However, if you are writing anything other than a text content to clipboard, then you need to use corresponding read method to read that type of data. Here, to read the HTML string copied to the clipboard, we need to use the readHTML() method:
let copiedData = clipboard.readHTML();
Clipboard also supports RTFText:
const { clipboard } = require('electron');
// writes into the clipboard
clipboard.writeRTF('Some RTF String');
// This can be read as follows
clipboard.readRTF();
To deal with the image in clipboard, you need to create a native image object to write into the clipboard. readImage and writeImage methods give you the access to the clipboard to work with the image. readImage will return the image in the clipboard as native image instance. To write an image from the local filesystem to clipboard, the following can be done:
const { nativeImage, clipboard } = require('electron');
let image = nativeImage.createFromPath('/Users/Downloads/Image.png');
clipboard.writeImage(image);
//Images can be read as
let clipboardImage = clipboard.readImage();
The entire clipboard content can be cleared using the clear method:
const { clipboard } = require('electron');
clipboard.clear();