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

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

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代码如下：

	
	
	


	
Electron注册全局快捷键及剪切板功能
    

        密钥：341AADF134WR414AF41
    
    

    

        粘贴密钥
        
    
    

    

        复制图片
    
    

    

渲染进程文件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);

}

效果图如下：