vue中获取剪切板中的内容

目录

1.说明

2.示例

3.总结


1.说明

在系统中的画面或者时外部文件中进行拷贝处理后,在页面中可以获取剪切板的内容。

2.示例

方式①(直接获取)

// 异步函数获取剪切板内容
async function getClipboardContent(ev: any) {try {ev.preventDefault()const clipboardText = await navigator.clipboard.readText();const str = clipboardText.split(' ')str.forEach(item => {if (item) {data.value.push({name: item})}})// 处理剪切板内容console.log(str);} catch (err) {console.error('Failed to read clipboard contents: ', err);return null;}
}

点击页面中的按钮,触发上述方法,通过navigator.clipboard.readText()方法,获取剪切板的内容。使用这个方法出现这样的问题,当从系统的页面中拷贝内容时,通过上述方法可以直接读取剪切板的内容,但是从系统外部的文件中拷贝内容时,点击页面的按钮触发这个方法时,会出现一个粘贴按钮,或者操作提示,只有再次点击或者允许进行操作时,才能获取剪切板的内容,这是浏览器的安全策略导致的。

方式②(间接获取)

拷贝内容后,在页面中设置一个输入框,现将拷贝的内容粘贴到输入框中,然后获取输入框的值从而获取拷贝的内容。

      <a-row :gutter="3" style="height: 30px"><a-col :span="22"><a-input v-model="pasteValue" placeholder="请粘贴要生成的内容"/></a-col><a-col :span="1"><a-button @click="setData"><template #icon><icon-copy/></template></a-button></a-col></a-row>
const setData = () => {const str = pasteValue.value.split(' ')str.forEach(item => {if (item) {data.value.push({name: item})}})pasteValue.value = ""
}

 获取拷贝的内容通过空格进行分割,从而获取拷贝的数据列表。

3.总结

navigator.clipboard 是一个 Web API,允许开发者访问用户的剪贴板内容,主要用于复制和粘贴操作。这个接口提供了一些异步方法,能够安全地读写剪贴板数据。

writeText(text)

  • 描述: 将文本写入剪贴板。
  • 参数: text - 要复制的字符串。
  • 返回值: 返回一个 Promise,在成功复制后解决。
    navigator.clipboard.writeText('Hello, World!').then(() => {console.log('文本已复制到剪贴板!');}).catch(err => {console.error('复制失败: ', err);});
    

readText()        

  • 描述: 从剪贴板读取文本。
  • 返回值: 返回一个 Promise,解决为剪贴板中的文本。
    navigator.clipboard.readText().then(text => {console.log('剪贴板中的文本: ', text);}).catch(err => {console.error('读取失败: ', err);});
    

使用注意事项

  • 安全性: 访问剪贴板需要在 HTTPS 环境中进行,或在 localhost 上。
  • 用户交互: 大多数浏览器要求在用户的交互(如点击按钮)后才能执行剪贴板操作,以防止滥用。

详细示例

<button id="copyButton">复制文本</button>
<button id="pasteButton">粘贴文本</button>
<p id="output"></p><script>document.getElementById('copyButton').addEventListener('click', () => {navigator.clipboard.writeText('Hello, Clipboard!').then(() => {console.log('文本已复制!');});});document.getElementById('pasteButton').addEventListener('click', () => {navigator.clipboard.readText().then(text => {document.getElementById('output').textContent = text;});});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/47477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜维尔科技:【研究】触觉技术将在5年内以8种方式改变人们的世界

触觉技术在过去几年中发展迅猛&#xff0c;大大提高了反馈的精确度和真实度。其应用产生了真正的影响&#xff0c;数百家公司和企业都集成了触觉技术来增强培训和研究模拟。 虽然触觉技术主要用于 B2B 层面&#xff0c;但触觉技术可能会彻底改变我们的生活&#xff0c;尤其是通…

DLMS协议中的高级安全(HLS)身份验证

1.四步身份验证协议 在IEC 62056-53中已说明&#xff0c;ACSE提供部分高级身份安全&#xff08;HLS&#xff09;验证服务。高级身份安全验证适用于通信通道不能提供内部安全&#xff0c;应采取防范措施以防止偷听和信息&#xff08;密码&#xff09;重现的情况。这时&#xff…

视频共享融合赋能平台LntonCVS视频监控业务平台技术方案详细介绍

LntonCVS国标视频综合管理平台是一款智慧物联应用平台&#xff0c;核心技术基于视频流媒体&#xff0c;采用分布式和负载均衡技术开发&#xff0c;提供广泛兼容、安全可靠、开放共享的视频综合服务。该平台功能丰富&#xff0c;包括视频直播、录像、回放、检索、云存储、告警上…

【数据结构】详解堆

一、堆的概念 堆(Heap)是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵 完全二叉树的 数组对象。 堆是非线性数据结构&#xff0c;相当于一维数组&#xff0c;有两个直接后继。 如果有一个关键码的集合K { k₀&#xff0c;k₁&#xff0c;k₂ &#xff0…

数据结构(双向链表)

链表的分类 链表的结构⾮常多样&#xff0c;以下情况组合起来就有8种&#xff08;2 x 2 x 2&#xff09;链表结构&#xff1a; 虽然有这么多的链表的结构&#xff0c;但是我们实际中最常⽤还是两种结构&#xff1a;单链表和双向带头循环链表 1.⽆头单向⾮循环链表&#xff1a…

Kafka系列之:Kafka存储数据相关重要参数理解

Kafka系列之:Kafka存储数据相关重要参数理解 一、log.segment.bytes二、log.retention.bytes三、日志段四、log.retention.check.interval.ms五、数据底层文件六、index、log、snapshot、timeindex、leader-epoch-checkpoint、partition.metadata一、log.segment.bytes 参数lo…

第十课:telnet(远程登入)

如何远程管理网络设备&#xff1f; 只要保证PC和路由器的ip是互通的&#xff0c;那么PC就可以远程管理路由器&#xff08;用telnet技术管理&#xff09;。 我们搭建一个下面这样的简单的拓扑图进行介绍 首先我们点击云&#xff0c;把云打开&#xff0c;点击增加 我们绑定vmn…

Android 10.0 系统属性控制蓝牙分享功能打开和关闭功能实现

1.前言 在10.0的系统rom产品定制化开发中,在进行某些蓝牙模块开发中,原生系统中会默认蓝牙有分享功能,而在实际的项目中 要求去掉分享功能,所以接下来分析下相关功能实现 2.系统属性控制蓝牙分享功能打开和关闭功能实现的核心类 frameworks\base\core\java\android\app\…

【面试题】Redo log和Undo log

Redo log 介绍Redo log之前我们需要了解一下&#xff0c;mysql数据操作的流程&#xff1a; 上述就是数据操作的流程图&#xff0c;可以发现sql语句并不是直接操作的磁盘而是通过操作内存&#xff0c;然后进行内存到磁盘的一个同步。这里我们必须要了解一些区域&#xff1a; 缓…

华为HCIP Datacom H12-821 卷42

42.填空题 如图所示&#xff0c;MSTP网络中SW1为总根&#xff0c;请将以下交换机与IST域根和主桥配对。 参考答案&#xff1a;主桥1468 既是IST域根又是主桥468 既不是又不是就是25 解析&#xff1a; 主桥1468 既是IST域根又是主桥468 既不是又不是就是25 43.填空题 网络有…

[日进斗金系列]用码上飞解决企微开发维修管理系统的需求

前言&#xff1a; 今天跟大家唠唠如何用小money生 大money的方法&#xff0c;首先我们需要准备一个工具。 这个工具叫码上飞CodeFlying&#xff0c;它是目前国内首发的L4级自动化智能软件开发平台。 它可以在短时间内&#xff0c;与AI进行几轮对话就能开发出一个可以解决实际…

WEB前端06-BOM对象

BOM浏览器对象模型 浏览器对象模型&#xff1a;将浏览器的各个组成部分封装成对象。是用于描述浏览器中对象与对象之间层次关系的模型&#xff0c;提供了独立于页面内容、并能够与浏览器窗口进行交互的对象结构。 组成部分 Window&#xff1a;浏览器窗口对象 Navigator&…

MacOS命令行运行fortran程序|编程私教解答

你好&#xff0c;我是悦创。 Fortran 是一种经典的编程语言&#xff0c;广泛用于科学计算和工程领域。如果你使用 macOS 系统并希望在命令行环境中编译和运行 Fortran 程序&#xff0c;这篇教程将引导你完成整个过程。 1. 准备工作 首先&#xff0c;确保你的 macOS 系统已安…

【Android】传给后端的Url地址被转码问题处理

一、问题 为什么使用Gson().toJson的时候&#xff0c;字符串中的会被转成\u003d 在 Gson 中&#xff0c;默认情况下会对某些特殊字符进行 HTML 转义&#xff0c;以确保生成的 JSON 字符串在 HTML 中是安全的。因此&#xff0c;字符 会被转义为 \u003d。你可以通过禁用 HTML 转…

区块链资料

Quantstamp - Public Security Assessments smart-contract-sanctuary-bsc/contracts/mainnet at master tintinweb/smart-contract-sanctuary-bsc GitHub https://github.com/slowmist/Cryptocurrency-Security-Audit-Guide/blob/main/README_CN.md sFuzz: 高效自适应的智…

Spring3(代理模式 Spring1案例补充 Aop 面试题)

目录 一、代理模式 介绍 意图 主要解决的问题 使用场景 实现方式 关键代码 应用实例 优点 缺点 使用建议 注意事项 结构 什么是代理模式&#xff1f; 为什么要用代理模式&#xff1f; 有哪几种代理模式&#xff1f; 1. 静态代理 实现 2. 基于接口的动态代理…

打造代码规范:在Gradle中配置代码风格检查

打造代码规范&#xff1a;在Gradle中配置代码风格检查 在软件开发过程中&#xff0c;代码风格一致性是保证项目质量和可维护性的重要因素。Gradle作为一个强大的构建工具&#xff0c;支持多种代码风格检查工具&#xff0c;如Checkstyle、PMD、FindBugs等。本文将详细介绍如何在…

MATLAB基础应用精讲-【数模应用】非线性回归模型

目录 前言 算法原理 非线性回归参数估计 模型评估 非线性回归方法 1、SVR 2、决策树回归 3、knn回归 4、RandomForest回归 5、XGBoost回归 6、神经网络MLP回归 7、LightGBM回归 8、GBDT回归 算法步骤: 非线性回归预测模型 一、数据探索 二、建立线性回归模型…

Android Studio环境安装指南

一、安装前注意事项&#xff1a; 安装android studio之前&#xff0c;请先检查下操作系统中的用户名(C盘->用户或user)下是否含有中文&#xff0c;如果含有中文&#xff0c;请新建一个用户&#xff08;必须全部英文&#xff09;&#xff0c;JDK的安装和配置也请重新安装和配…

.Net Core中的内存缓存实现——Redis及MemoryCache(2个可选)方案的实现

ASP.NET Core 支持多个不同的缓存。 最简单的缓存基于 IMemoryCache。 IMemoryCache 表示存储在 Web 服务器内存中的缓存。 在服务器场&#xff08;多个服务器&#xff09;中运行的应用应确保在使用内存中缓存时会话是粘滞的。 粘滞会话可确保来自客户端的请求都转到同一服务器…