前端调接口拿到数据之后,复制文本

一、使用navigator.clipboard对获取的内容进行复制。

需要注意navigator.clipboard使用的条件是:

1.通过 HTTPS 协议访问的页面

2.本地开发服务器上的页面,即 URL 为 http://localhost。经测试http://127.0.0.1,这个是不能使用的。

3.直接打开本地文件,即 URL 以 file:// 开头(某些浏览器可能有不同的实现)。

二、解决navigator.clipboard不支持的情况下,使用document.execCommand('copy'),来实现复制文本

async function copyHandler(copyText) {try {if (!navigator.clipboard) {// 创建一个隐藏的 textarea 元素const textArea = document.createElement('textarea');textArea.value = copyText;// 使 textarea 不可见textArea.style.position = 'fixed';textArea.style.left = '-9999px';// 将 textarea 添加到文档中document.body.appendChild(textArea);// 选择 textarea 中的文本textArea.select();// 执行复制命令document.execCommand('copy');// 从文档中移除 textareadocument.body.removeChild(textArea);return console.log('复制成功')}// 复制到剪贴板await navigator.clipboard.writeText(copyText);console.log('复制成功')} catch (error) {console.log('复制失败')}
}

三、直接使用clipboard三方库实现

地址:clipboard - npm

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

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

相关文章

【C语言】宏定义常量加 ; 的错误

我在使用宏定义常量定义二维数组的时候,编译器报错:应输入“]”,如下: 原因是宏定义不是C语言规定的语句,它的结尾不加 ; 。在上图的 int mine[EASY_ROWS][EASY_COLS]; 中,把 EASY_ROWS 替换为了 9;2; &…

【VUE3】vue3 面试知识点

1. Vue 3 相比 Vue 2 的主要改进 Composition API:引入了一套基于函数的 API,允许以更灵活和可复用的方式组织组件逻辑。性能提升:通过改进虚拟 DOM 的算法和底层架构,实现了更快的渲染速度和更低的内存使用率。TypeScript 支持&…

【秋招笔试题】小明的美食

解析&#xff1a;思维题。由于需要互不相同&#xff0c;每次操作取重复的值与最大值相加即可&#xff0c;这样即可保证相加后不会新增重复的值。因此统计重复值即可。 #include <iostream> #include <algorithm>using namespace std; const int maxn 1e5 5; int…

大模型算法面试题(十一)

本系列收纳各种大模型面试题及答案。 1、说一下目前主流或前沿的预训练模型&#xff0c;包括nlp&#xff08;百度ERNIE3.0&#xff0c;华为NEZHA&#xff0c;openAI gpt-3&#xff0c;nvidia MegatronLM&#xff0c;macrosoft T5&#xff09;和cv&#xff08;我只知道CLIP&…

wordpress主题Typecho仿百度响应式主题Xaink

wordpress主题Typecho仿百度响应式主题Xaink 新闻类型博客主题&#xff0c;简洁好看&#xff0c;适合资讯类、快讯类、新闻类博客建站&#xff0c;响应式设计&#xff0c;支持明亮和黑暗模式 直接下载 zip 源码->解压后移动到 Typecho 主题目录->改名为xaink->启用

内衣洗衣机和手洗哪个干净?推荐五款品质优良精品

在日常生活中&#xff0c;内衣洗衣机已成为现代家庭必备的重要家电之一。选择一款耐用、质量优秀的内衣洗衣机&#xff0c;不仅可以减少洗衣负担&#xff0c;还能提供高效的洗涤效果。然而&#xff0c;市场上众多内衣洗衣机品牌琳琅满目&#xff0c;让我们往往难以选择。那么&a…

实时捕获数据库变更

1.CDC概述 CDC 的全称是 Change Data Capture &#xff0c;在广义的概念上&#xff0c;只要能捕获数据变更的技术&#xff0c;我们都可以称为 CDC 。我们目前通常描述的CDC 技术主要面向数据库的变更&#xff0c;是一种用于捕获数据库中数据变更的技术&#xff0c;CDC 技术应用…

pytorch backbone

1 简介 在PyTorch深度学习中&#xff0c;预训练backbone&#xff08;骨干网络&#xff09;是一个常见的做法&#xff0c;特别是在处理图像识别、目标检测、图像分割等任务时。预训练backbone通常是指在大型数据集&#xff08;如ImageNet&#xff09;上预先训练好的卷积神经网络…

基于Flink SQL CDC的实时数据同步

基于Flink SQL CDC&#xff08;Change Data Capture&#xff09;的实时数据同步是一种高效的数据处理方案&#xff0c;它允许用户实时捕获数据库中的变更操作&#xff0c;并将这些变更以流的形式进行处理和同步到其他系统或数据库中。以下是关于基于Flink SQL CDC的实时数据同步…

Linux嵌入式学习——数据结构——队列

一、概念 1&#xff09;定义 是只允许在一端进行插入操作&#xff0c;而在另一端进行删除操作的线性表 队列 是一种 先进先出&#xff08;First In First Out&#xff09; 的线性表 线性表有顺序存储和链式存储&#xff0c;栈是线性表&#xff0c;所以有这两种存储方式 同样…

【在开发小程序的时候如何排查问题】

在开发小程序的时候如何排查问题 在最近开发小程序的时候&#xff0c;经常出现本地在浏览器中调试没有问题&#xff0c;但是一发布到预发环境就出现各种个样的问题 手机兼用性问题 有时候会出现苹果&#x1f34e;手机键盘弹出&#xff0c;导致ui界面高度出现异常边界问题&#…

使用PageHelper插件来分页查询

目录 一.什么是PageHelper&#xff1f; 二.PageHelper的实战操作&#xff1a; 1.导入PageHelper的相关依赖&#xff1a; 2.配置代码展示&#xff1a; 3.分页查询代码解析&#xff1a; 另外&#xff0c;肯定读者会好奇为什么能够自动动态拼接&#xff1f; 一.什么是PageH…

关于Static 误用问题,总是记不住

一、常规的 静态局部变量&#xff0c;静态成员变量和成员函数没啥疑问 二、全局变量问题。。。 * 如果在 C 文件中使用 static 修饰全局变量&#xff0c; * 它将限制变量的作用域在当前文件内。 * 这意味着其他文件无法直接访问或修改这个变量的值。 …

Arduino IDE界面和设置(基础知识)

Arduino IDE界面和设置&#xff08;基础知识&#xff09; 1-2 Arduino IDE界面和设置如何来正确选择Arduino开发板型号如何正确选择Arduino这个端口如何来保存一个Arduino程序Arduino ide 的界面功能按钮验证编译上传新建打开保存工作状态 1-2 Arduino IDE界面和设置 大家好这…

day00-系统重要文件

01.知识点回顾 1.resolv.conf dns的配置文件 [rootlinux ~]# vim /etc/resolv.conf [rootlinux ~]# nslookup www.baidu.com Server: 8.8.8.8 Address: 8.8.8.8#53Non-authoritative answer: www.baidu.com canonical name www.a.shifen.com. Name: www.a.shifen.com Addre…

MongoDB适合哪些人使用

MongoDB 是一款高性能、开源、无模式的文档型数据库&#xff0c;它使用 BSON&#xff08;Binary JSON&#xff09;作为其数据格式&#xff0c;这使得 MongoDB 非常适合于存储和查询复杂的数据结构。MongoDB 的灵活性、可扩展性和高性能特性吸引了多种类型的用户。以下是 MongoD…

如何穿透模糊,还原图片真实面貌

目录 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 前言 论文背景 论文思路 模型介绍 复现过程 演示视频 使用方式 本文所涉及所有资源均在传知代码平台可获取。 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 在我…

全网最最实用--模型高效推理:量化基础

文章目录 一、量化基础--计算机中数的表示1. 原码&#xff08;Sign-Magnitude&#xff09;2. 反码&#xff08;Ones Complement&#xff09;3. 补码&#xff08;Twos Complement&#xff09;4. 浮点数&#xff08;Floating Point&#xff09;a.常用的浮点数标准--IEEE 754(FP32…

状态机 XState 使用

状态机 一般指的是有限状态机&#xff08;Finite State Machine&#xff0c;FSM&#xff09;&#xff0c;又可以称为有限状态自动机&#xff08;Finite State Automation&#xff0c;FSA&#xff09;&#xff0c;简称状态机&#xff0c;它是一个数学模型&#xff0c;表示有限个…

【计算机网络】数据链路层实验

一&#xff1a;实验目的 1&#xff1a;学习WireShark软件的抓包操作&#xff0c;分析捕获的以太网的MAC帧结构。 2&#xff1a;学习网络中交换机互相连接、交换机连接计算机的拓扑结构&#xff0c;理解虚拟局域网&#xff08;WLAN&#xff09;的通信机制。 3&#xff1a;学习…