Electron 剪贴板实现示例详解

摘要： 正文在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据，常用的是 document.execCommand 方法：// 复制数据const inputElement =...

?=正文

在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据，常用的是 document.execCommand 方法：

// 复制数据 const inPutElement = document.queryselector('#input') inputElement.select() document.execCommand('Copy')  // 粘贴数据 const pasteText = document.querySelector('#output') pasteText.focus() document.execCommand('paste') 

不过该方法有两个缺点：

后来浏览器厂商提出了异步 Clipboard apI，但限制很多，例如：

而在 electron 中读写剪贴板非常容易，因为 clIPbOArd 模块提供了很多调用系统剪贴板相关的 API：

这些 API 既可以在主进程中调用，也可以在渲染进程中调用。

但是需要注意，在渲染进程中（即 preload.JS 脚本中），必须是非沙箱环境下才能使用 clipboard 模块，而 Electron 创建窗口时是默认开启沙箱模式的，因此要手动设置 sandbox 为 false，否则会报下面的错：

接下来就为大家讲解 Electron 剪贴板模块中的常用方法：

avaiLableformaTS

availableFORMats 用于查看当前剪贴板内支持的数据格式。剪贴板内的数据一般都要经历两个环节：

假设用户复制带样式的文本，那么剪贴板会存放 RTF 和纯文本两种格式的数据，粘贴时，目标窗口会自动优先选择最描述性格式的数据，如果窗口识别 RTF，则使用带格式的数据，否则就使用文本数据，此时格式设置信息丢失。

举个例子，例如我在网页上复制百度的 loGo，会得到两种格式的数据：

此时如果调用 availableFormats方法，会得到两种结果：

const formats = clipboard.availableFormats() console.log(formats) // [ 'text/html', 'image/png' ] 

应用程序还可以自己注册粘贴板格式（registered clipboard formats），例如在 VSCode 里面复制了一段代码，会得到三种格式的数据：

其中最后一种就是 vscode 自定义的数据格式，可以调用 availableFormats验证一下：

const formats = clipboard.availableFormats() console.log(formats) // [ 'text/plain', 'text/html', 'VScode-eDItor-data' ] 

可以看到，最后一种是 VScode-editor-data 是自定义的。

readText 和 writeText

从剪贴板读取或向剪贴板写入纯文本数据：

clipboard.writeText('写入文本') const result = clipboard.readText() console.log(result) // 写入文本 

readHTML 和 writeHTML

从剪贴板读取或向剪贴板写入 HTML 格式数据：

clipboard.writeHTML('<p style="color: red">红色</p>') const result = clipboard.readHTML() console.log(result) // <Meta charset='utf-8'><p style="color: red">红色</p> 

readimage 和 writeImage

从剪贴板读取或向剪贴板写入图片格式数据：

clipboard.writeImage(nativeImage.createfrompath(path.join(__dirname, 'apple.png'))) const result = clipboard.readImage() console.log(result) 

readRTF 和 writeRTF

从剪贴板读取或向剪贴板写入 RTF 格式数据：

clipboard.writeRTF('{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard\nthis is some {\b bold} text.\par\n}') const result = clipboard.readRTF() console.log(result) 

clear

这个 API 最简单，直接清空剪贴板内容：

clipboard.clear()

以上就是Electron 剪贴板实现示例详解的详细内容，更多关于Electron 剪贴板的资料请关注云初冀北其它相关文章！

本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：GOliszhou@gmail.com