返回文章列表
Electron-开发实践:clipboard剪切板
Electron
【前言】
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的方式会弹出安全授权,需要用户允许后才可以使用
更多同类文章
- Electron-开发实践:注册苹果开发者账号
- Electron-开发实践:crash上报及解析
- Electron-开发实践:DMG安装包定制
- Electron-开发实践:包体积精简
- Electron-开发实践:制作icns图标
- Electron-开发实践:本地日志
- Electron-开发实践:定制Mac菜单
- Electron-开发实践:Mac应用包签名和公证
- Electron-开发实践:Mac打包
- Electron-开发实践:使用Monorepo管理Electron项目
- Electron-开发实践:注册快捷键
- Electron-开发实践:几种更新方式
- Electron-开发实践:创建Window
- 一篇文章学会Electron
- Electron-开发实践:本地数据库SQLite