Electron 剪贴板实现示例详解

目录
  • 正文
  • availableFormats
  • readText 和 writeText
  • readHTML 和 writeHTML
  • readImage 和 writeImage
  • readRTF 和 writeRTF
  • clear

正文

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

// 复制数据
const inputElement = document.querySelector('#input')
inputElement.select()
document.execCommand('copy')

// 粘贴数据
const pasteText = document.querySelector('#output')
pasteText.focus()
document.execCommand('paste')

不过该方法有两个缺点：

  • 只能将选中的内容复制到剪贴板，不能通过代码写入任意内容
  • 该 API 是同步操作，如果数据量较大，会造成页面卡顿

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

  • 只有 HTTPS 页面才能使用这个 API
  • 调用时需要明确获取用户授权

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

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

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

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

availableFormats

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

  • 复制的时候，粘贴板内可以同时存放多种格式数据，被称为 clipboard formats
  • 粘贴的时候，目标程序可以按照这些 formats 来选择自己最需要的格式

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

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

  • html 格式

  • tiff格式

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

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

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

  • html

  • utf8-plain-text

  • org.chromium.web-custom-data

其中最后一种就是 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 剪贴板的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Electron 网络拦截实战示例详解

    目录 正文 自定义 UA 绕过跨域限制 请求转发 正文 Electron 提供的 webRequest API,允许开发者对网络进行过滤和监听,并且可以修改 header 字段甚至请求地址,功能非常强大,它的类结构如下: 不过需要注意,该模块只能在主进程中使用,接下来为大家介绍 webRequest 三个非常典型的使用场景: 自定义 UA 有些接口为了过滤非法请求,会首先校验 UserAgent,正常的浏览器是无法伪造 UA 的,不过在 Electron 里面可以很容易做到,webRequest

  • Electron调用外接摄像头并拍照上传实现详解

    目录 背景 需求分析 实现 视频采集 MediaDevices.getUserMedia() 拍照生成图片 上传图片至CDN 1. 使用HTMLCanvasElement.toBlob() 语法 参数 2. 使用HTMLCanvasElement.toDataURL() 语法 参数 返回值 总结 背景 基于Electron实现的pc端智能验机应用,近期迭代了一个新的功能,需求是通过电脑外接摄像头对手机屏幕进行拍照,拍照后需将照片上传至服务端进行屏幕信息比对,确定被检测屏幕是否为原厂屏. 需求分析

  • electron 中 webview的使用示例解析

    目录 正文 获取webview的dom webview 页面 webview页面的代码 新建public/preload.js文件 监听页面对否显示 禁止打开新窗口 刷新页面 上一页 下一页 正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,

  • electron打包中的巨坑解决记录

    目录 吐槽 问题一:css文件中图片加载失败 问题描述 解决过程 补充 问题二:无法使用cookie 问题描述 原因分析 总结 吐槽 从上周五到今天,我被electron打包折磨得死去活来,本来想让测试用桌面端的,现在不得不改用web端,真的好无语.今天解决问题顺利打包后来记录一下这个问题. 问题一:css文件中图片加载失败 问题描述 问题是这样的,electron打包为桌面端以后,登录页的表单是正常显示的,但是整个页面的背景图没了.我百度了一下,发现大多是说白屏啥的,但是我不是白屏啊,我的表单

  • electron渲染进程主进程相互传值示例解析

    目录 在electron中分为渲染进程和主进程 浏览器传值给主进程 浏览器环境 主进程 主进程传值给渲染进程 主进程 渲染进程 注意 在electron中分为渲染进程和主进程 渲染进程就是浏览器环境,主进程就是node环境 既然他们是不同的环境,那么为我们怎么让他们相互关联起来呢?或者说怎么传递值? 毕竟在开发中可能会遇到我想要的值只能在node环境中才能获取,然后node中可能也会需要浏览器环境的值:这个时候就需要两个环境联通起来相互传值 浏览器传值给主进程 浏览器环境 引入: import

  • Electron 剪贴板实现示例详解

    目录 正文 availableFormats readText 和 writeText readHTML 和 writeHTML readImage 和 writeImage readRTF 和 writeRTF clear 正文 在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据,常用的是 document.execCommand 方法: // 复制数据 const inputElement = document.querySelector('#input') inputEleme

  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

  • bat批处理 if 命令示例详解

    if 命令示例详解 if,正如它E文中的意思,就是"如果"的意思,用来进行条件判断.翻译过来的意思就是:如果符合某一条件,便执行后面的命令. 主要用来判断,1.两个"字符串"是否相等:2.两个数值是大于.小于.等于,然后执行相应的命令. 当然还有特殊用法,如结合errorlevel:if errorlevel 1 echo error 或者结合defined(定义的意思):if defined test (echo It is defined) else echo 

  • Docker-Compose的使用示例详解

    Docker-Compose的使用示例详解

    Docker Compose是一个用来定义和运行复杂应用的Docker工具.使用Compose,你可以在一个文件中定义一个多容器应用,然后使用一条命令来启动你的应用,完成一切准备工作. - github.com/docker/compose docker-compose是用来在Docker中定义和运行复杂应用的工具,比如在一个yum文件里定义多个容器,只用一行命令就可以让一切就绪并运行. 使用docker compose我们可以在Run的层面解决很多实际问题,如:通过创建compose(基于YU

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • php示例详解Constructor Prototype Pattern 原型模式

    原型模式中主要角色 抽象原型(Prototype)角色:声明一个克隆自己的接口 具体原型(Concrete Prototype)角色:实现一个克隆自己的操作 当一个类大部分都是相同的只有部分是不同的时候,如果需要大量这个类的对象,每次都重复实例化那些相同的部分是开销很大的,而如果clone之前建立对象的那些相同的部分,就可以节约开销. 针对php的一种实现方式就是__construct()和initialize函数分开分别处理这个类的初始化,construct里面放prototype也就是公共的

  • JavaScript作用域示例详解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

  • .NetCore实现上传多文件的示例详解

    .NetCore实现上传多文件的示例详解

    本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞:由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧: form方式上传一组图片 先来看看咋们html的代码,这里先简单说下要上传文件必须要

随机推荐