Electron-开发实践：clipboard剪切板

【前言】

Electron提供获取和写入系统剪切板的操作，

详见：https://www.electronjs.org/docs/latest/api/clipboard

【进程】

clipboard支持主进程使用，支持没有开启sandbox的渲染进程使用

const { clipboard } = require("electron");

【系统】

大部分clipboard的api支持windows，mac，linux操作系统，

在linux下有一个selection剪切板，

可以使用type参数传入获取selection剪切板内容，

// 默认
clipboard.readText();

// linux下selection剪切板
clipboard.readText("selection");

【api】

clipboard中的读写相关的api，如下

// text
clipboard.readText();
clipboard.writeText(text);

// html
clipboard.readHTML();
clipboard.writeHTML(markup);

// image
clipboard.readImage();
clipboard.writeImage(image);

// rtf
clipboard.readRTF();
clipboard.writeRTF(text);

// bookmark，仅支持windows和mac
clipboard.readBookmark();
clipboard.writeBookmark(title, url);

// find text，仅支持mac
clipboard.readFindText();
clipboard.writeFindText(text);

其他api

// 清空剪切板
clipboard.clear();

// 获取支持的剪切板格式，例如：[ 'text/plain', 'text/html' ]
clipboard.availableFormats();

【sandbox】

上面有说过clipboard不支持在没有开启sandbox的渲染进程中使用，

那么如果要在没开启sandbox的渲染进程中操作剪切板应该怎么做呢？

通过ipc

一种方法是渲染进程和主进程ipc来操作clipboard

渲染进程中

// preload.js

const { ipcRenderer } = require("electron");

ipcRenderer.send("clipboard-write-text", text);

主进程中

// main.js

const { ipcMain, clipboard } = require("electron");

ipcMain.on("clipboard-write-text", (_, text) => {
  clipboard.writeText(text);
});

通过浏览器clipboard相关api

浏览器支持navigator.clipboard，

详见：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API

渲染进程中

navigator.clipboard.readText().then((clipText) => {
  console.log(clipText);
});

对比

1. ipc的方式用户无感知，但是如果ipc传递的剪切板内容较大可能会卡顿

2. navigator.clipboard的方式会弹出安全授权，需要用户允许后才可以使用