Vue中进行粘贴板粘贴数据(图片、文字等)

在页面中如果需要进行粘贴数据,那么就要读取系统粘贴板clipboard,通过此Api来进行粘贴板数据的操作。

目录:

  • 一.封装相关函数
    • 1.示例代码:
    • 2.代码解释:
  • 二.页面中进行粘贴
    • 1.代码示例:
    • 2.代码解释:
  • 三.运行结果

一.封装相关函数

1.示例代码:

let Instance = null;class NavtiveBridge {constructor() {// 判断环境this.platform = (navigator.userAgent.match(/(Electron)/i) || (/macintosh|mac os x/i.test(navigator.userAgent))) && !!(window.ipcRenderer && window.shell && window.remote)//根据环境选择相关this.clipboard = this.platform ? window.clipboard : window.navigator.clipboardthis.clipboard.readAvailableFormats = ()=>{if(this.platform){return Promise.resolve(window.clipboard.availableFormats())}else{return new Promise(async(resolve, reject)=>{try {let clipboardItem = await window.navigator.clipboard.read()resolve(clipboardItem[0] ? clipboardItem[0].types : [])} catch (error) {reject(error)}})}}this.setClipboardWrite()}//写入剪切板setClipboardWrite(){if(!this.platform){const originalWriteText = navigator.clipboard.writeText;this.clipboard.writeText = async (text)=>{// 是否授权const { state } = await navigator.permissions.query({ name: "clipboard-write", });if(state === 'granted'){return originalWriteText.apply(navigator.clipboard,[text])}else{return Promise.resolve()}}}else{const originalWriteText = window.clipboard.writeText;this.clipboard.writeText = async (text)=>{originalWriteText.apply(window.clipboard,[text])return Promise.resolve()}}}// 读取复制的值async readText(){if(!this.platform){return  await this.clipboard.readAvailableFormats()}else{return await this.clipboard.read()[0].types}}
}
if (!Instance) {Instance = new NavtiveBridge();
}
//导出
export default Instance;

2.代码解释:

  1. 首先定义了一个变量 Instance,用于存储 NavtiveBridge 类的实例。如果 Instance 为空,则创建一个新的 NavtiveBridge 实例并赋值给 Instance,以保证只有一个 NavtiveBridge 实例存在。

  2. NavtiveBridge 类的构造函数通过检测用户代理字符串来确定当前运行环境是否支持本地原生功能(如 Electron 桌面应用或者 Mac 上的 Web 应用)。如果支持本地原生功能,则使用本地原生的剪贴板 API,否则使用 Web 标准的剪贴板 API。在构造函数中,还调用了 setClipboardWrite() 方法来设置写入剪贴板的方法。

  3. setClipboardWrite() 方法用于设置写入剪贴板的方法。如果运行环境支持本地原生功能,则直接调用本地原生的写入剪贴板方法;否则使用 Web 标准的写入剪贴板方法,并在写入前检查权限。

  4. readText() 方法用于读取剪贴板中的文本。如果支持本地原生功能,则直接调用本地原生的读取剪贴板方法;否则使用 Web 标准的读取剪贴板方法,并返回剪贴板中的文本。

最后通过 export defaultInstance 导出,以便其他模块可以引入并使用该实例。

二.页面中进行粘贴

1.代码示例:

<template><div class="OnePageDemo"><el-button type="primary" @click="pasetText">粘贴</el-button><p>这是复制图片数据:</p><img :src="pasteUrl" style="width: 500px;height: 500px;" alt="" srcset=""></div>
</template><script>
// 导入上述封装的js
import demo from './demo'
export default {name: 'OnePageDemo',data() {return {platform: "",  //平台环境clipboard: "", //粘贴板pasteUrl: ""  //链接};},mounted() {},methods: {async pasetText() {let clipboard = demo.clipboardlet clipboardType = await clipboard.readAvailableFormats()let readText = await clipboard.readText()// 输入框粘贴let excelArr = ['text/plain', "text/html", "text/rtf", "image/png"]   //excel格式let num = 0excelArr.forEach(e => {!clipboardType.includes(e) && (num += 1)})if (clipboardType.includes("image/png")) {const clipboardItems = await clipboard.read()for (const clipboardItem of clipboardItems) {for (const type of clipboardItem.types) {// 筛选图片类型的文件const blob = await clipboardItem.getType(type)this.pasteImg(blob)}}}else{console.log(readText,'这是文本数据');}},pasteImg(blob) {let self = this;// blob 就是从剪切板获得的文件 可以进行上传或其他操作var imgs = new Image();var reader = new FileReader();reader.onload = (function (aImg) {return function (e) {self.pasteUrl = e.target.result;};})(imgs);reader.readAsDataURL(blob);}}
}
</script>

2.代码解释:

  1. pasetText 方法是一个点击按钮后触发的方法,用于从剪贴板中读取数据,并根据数据类型进行处理。如果剪贴板中包含图片数据,则调用 pasteImg 方法进行处理;如果剪贴板中是文本数据,则直接打印出来。
  2. pasteImg 方法用于处理粘贴的图片数据,它接受一个 blob 参数,该参数是从剪贴板获得的文件。在方法内部,创建一个新的 Image 对象和一个 FileReader 对象,使用 FileReader 对象将 blob 转换成 Data URL,然后将 Data URL 赋值给 pasteUrl 属性,以在页面上展示图片。

三.运行结果

在这里插入图片描述

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

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

相关文章

系统分析师论文——论软件需求分析方法和工具的选用

现已临近2024年软考&#xff0c;周围一些报名参加系统分析师考试的“小伙伴”还未准备论文&#xff0c;我分享早年写的一些内容&#xff08;包括参加继续教育准备的论文&#xff09;&#xff0c;仅供大家结合最新考纲要求酌情参考&#xff0c;希望予人玫瑰&#xff0c;手有余香…

软件测试之 性能测试 性能测试基础指标 Loadrunner、Jmeter等工具

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github gitee 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我会尽力带来有趣的内容 本文档基于 https://www.bilibili.com/video/BV1wC4y1Y…

Spring STOMP-好处

使用STOMP作为子协议&#xff0c;可以让Spring框架和Spring Security提供比直接使用原始WebSockets更丰富的编程模型。类似HTTP与原始TCP的比较&#xff0c;以及HTTP协议是如何让Spring MVC和其他Web框架拥有丰富的功能。以下是STOMP协议的一些好处&#xff1a; 不需要再发明自…

原创未发表!24年新算法SBOA优化TVFEMD实现分解+四种熵值+频谱图+参数变化图+相关系数图!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 数据介绍 优化流程 创新点 使用TVFEMD的创…

【全面介绍下Spring】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Excel 分组汇总后删除明细

有 Excel 数据如下所示&#xff1a; IDCriteria1Criteria2Criteria3Criteria4101210271239312381236123171826182918239182120182147 需要按 ID 分组汇总其余列&#xff0c;结果如下&#xff1a; IDCriteria1Criteria2Criteria3Criteria410121027123932561826939267 解法及简…

3D Web轻量化引擎HOOPS Communicator如何处理DWG文件中的图纸?

在当今工程设计和建筑领域&#xff0c;数字化技术已经成为不可或缺的一部分。HOOPS Communicator作为一种强大的三维数据可视化工具&#xff0c;被广泛应用于处理各种CAD文件&#xff0c;其中包括AutoCAD的DWG格式。在这篇文章中&#xff0c;我们将探讨HOOPS Communicator是如何…

stl学习以及abc比赛例题

1.引例 一提到查找&#xff0c;我们一上来想的肯定是find()函数或者search()函数&#xff0c;但是这种查找的底层逻辑终究是用顺序查找的方式&#xff0c;运行的时间成本非常高昂&#xff0c;所以平时能不用就不用&#xff0c;比赛的时候用这种查找和自己while遍历&#xff0c…

第十五届蓝桥杯C++大学A组压轴题解:封印宝石

题目&#xff1a;第十五届蓝桥杯C大学A组省赛压轴题 题目传送门 题意&#xff1a;将n个数放在n个位置上&#xff0c;每个数只能放在它自己之前的位置上&#xff0c;且离自己多远就花费多少代价&#xff0c;可以有没放的数&#xff0c;给出最大代价要求最后放的数排成的字典序…

Java 常见集合类

集合的整体框架 Java 的集合&#xff0c;也可以叫做容器&#xff0c;根据集合的整体框架可以看出&#xff0c;主要是两大集合接口&#xff1a;第一个是 Collection 接口&#xff0c;主要用来存放单一的元素对象&#xff1b;另一个是 Map 接口&#xff0c;主要用于存储键值对。…

Compose 重组

文章目录 Compose 重组概述重组特性组件会按任意顺序运行组件并行运行重组更新部分组件重组是乐观操作 重组作用域 Compose 重组 概述 组合阶段用于生成并维护 LayoutNode 视图树&#xff0c;当使用 Activity 中的 setContent() 时&#xff0c;会开始首次组合&#xff0c;这时…

小程序获取手机号,用户昵称,头像

一、手机号 在微信小程序中&#xff0c;获取用户手机号也需要用户的明确授权。你可以使用 button 组件的 open-type 属性设置为 getPhoneNumber 来实现这个功能。当用户点击这个按钮时&#xff0c;会弹出一个对话框请求用户的授权。如果用户同意&#xff0c;你可以在 bindgetp…

在学习uni-app过程中使用的css样式记录

在学习uni-app过程中&#xff0c;记录下使用的css样式&#xff0c;持续更新 <style lang"scss" scoped> // lang"scss":是定义样式的方式&#xff1b;scoped&#xff1a;只在当前页面生效的样式 width: 100vw; //设置宽&#xff0c;单位px、%、vw&…

通过三重循环遍历来寻找两个顶点之间的最短路径[示例]

弗洛伊德-沃舍尔算法&#xff08;Floyd-Warshall Algorithm&#xff09;是一种用于解决所有节点对之间最短路径的动态规划算法。它能够有效地计算出图中任意两个节点之间的最短路径长度。 这个算法的基本思想是通过逐步迭代来寻找两个顶点之间的最短路径。它的核心思想是利用中…

知识付费语音问答系统的商业模式,在线教育有哪些付费推广渠道?

在线教育越发火热&#xff0c;那么竞争也就越激烈。目前在线教育行业有一大痛点那就是难以获取用户&#xff0c;在这种情况下光靠免费渠道获取流量是远远不够的。那么在线教育付费推广方法有哪些? 1、SEM&#xff1a; SEM就是大家常说的竞价广告&#xff0c;包括百度竞价、360…

前端内嵌iframe网页单点登录的三种方式

背景&#xff1a;我们开发中会遇到让内嵌的iframe进行登录&#xff0c;但是有希望是单点登录&#xff0c;不想多次登录 目录 方法一&#xff1a;共享sessionStorage或localStorage 方法二&#xff1a;设置内嵌iframe的url参数 方法三&#xff1a;通过父子页面通信postMessage…

共赴科技盛会“2024南京智博会”11月在南京国际博览中心召开

2024年&#xff0c;南京这座历史悠久的文化名城迎来了一场科技与智慧交织的盛会——南京智博会|南京国际智慧城市、物联网、大数据。本次博览会以智慧城市、人工智能、消费电子、物联网、大数据为主题&#xff0c;汇聚了全球各地的智能科技精英&#xff0c;共同探讨智慧城市建设…

46 udp网络程序

查询网络服务的命令 netstat -nlup n: 显示数字 a&#xff1a;显示所有 u&#xff1a;udp服务 p&#xff1a;显示pid Recv-Q收到的数量&#xff0c;本地ip和远端ip&#xff0c;00表示可以收到任何地址 网络聊天 服务端 定义一个server类&#xff0c;成员保存ip地址&#xff…

龟兔赛跑(基于GUI与多线程实现)

直击龟兔赛跑现场 下面这张图是我们设计龟兔赛跑界面的初始效果与基本组成结构&#xff1a; 接下来是我仅代表我个人提出的一些疑问与解答&#xff1a; 1、俩动物以图片的形式显示&#xff1f; 其实在这里两个动物类就像标签一样 标签组件是什么&#xff1f;用于短文本字符串…

从loss角度理解LLM涌现能力

如今的很多研究都表明小模型也能出现涌现能力&#xff0c;本文的作者团队通过大量实验发现模型的涌现能力与模型大小、训练计算量无关&#xff0c;只与预训练loss相关。 作者团队惊奇地发现&#xff0c;不管任何下游任务&#xff0c;不管模型大小&#xff0c;模型出现涌现能力…