Electron中使用clipboard模块实现复制粘贴功能

aiguangyuan

已于 2022-07-12 17:11:13 修改

阅读量4.6k

点赞数 2

分类专栏： Electron 文章标签：桌面端开发 Electron

于 2021-04-26 00:10:21 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/116141122

版权

Electron 专栏收录该内容

18 篇文章 20 订阅

订阅专栏

软件开发中复制粘贴是一种比较常见的功能，如复制微信号引导用户粘贴去搜索关注，还有常见的复制图片进行粘贴。

Electron中的clipboard模块就是用来实现这些功能的，该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等，以下是代码实现。

主进程文件main.js代码如下：

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");


const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();

};


// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

渲染进程文件index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Electron开发</title>
</head>
<body>
	<p>Electron注册全局快捷键及剪切板功能</p>
    <div>
        密钥：<span id="code" style="color:red">341AADF134WR414AF41</span>
    </div>
    <br>
    <div>
        <button id="button" style="margin-right:10px;">粘贴密钥</button>
        <input type="text" style="width:200px;">
    </div>
    <br>
    <div>
        <button id="copyImage">复制图片</button>
    </div>
    <br>
    <script src="./renderer/clipboard.js"></script>
</body>

</html>

渲染进程文件index.html中引入的clipboard.js文件代码：

var { clipboard,nativeImage}=require("electron");


var code = document.querySelector("#code");
var button = document.querySelector("#button");
var input = document.querySelector("input");
// 点击复制密钥
code.onclick=function(){
    clipboard.writeText(code.innerHTML);
    alert("复制成功!");
};

// 点击粘贴密钥
button.onclick = function(){ 
    // 获取复制的内容
    input.value = clipboard.readText();
};




var copyImage = document.querySelector("#copyImage");

// 点击复制图片
copyImage.onclick = function(){

    var image = nativeImage.createFromPath("static/love.png");
    clipboard.writeImage(image);
    // base64图片编码
    var imageSrc = clipboard.readImage().toDataURL();

    // 新建图片插入
    var newImage = new Image();
    newImage.src = imageSrc;
    newImage.style.width = "100px";
    newImage.style.height = "100px";

    document.body.appendChild(newImage);

}

效果图如下：