vue中怎么实现点击按钮,把一张图片复制到剪切板? 5C

rt

有点奇葩的一个想法,

一张图片下放一个按钮,这个图片是生成的,可以获取到,点一下复制,就可以把图片复制到剪切板

在网上查了好久,找到了clipboard.js ,但是只能复制文字到剪切板

求指点,虽然这个功能有点奇葩,

谢谢!!!

0

1个回答

1 . npm安装到项目目录文件中

npm install clipboard --save

1
2

2 . import 引入文件

import Clipboard from 'clipboard';

1

3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容

复制地址

1

4 . 在JavaScript中通过类名找到元素中的内容。

let clipboard = new Clipboard('.copyBtn');

1

这里写图片描述

就是这个样子了,如果需要这个地址,直接在方法中引用clipboard这个变量就可以了,不需要的话就不用管这个变量,它不需要做任何处理,单击那个类名为copyBtn的按钮以后,直接Ctrl+v就可以了

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击按钮复制到剪切板
我有一段内容,比如string bb="123456";rn怎么点击按钮将这段内容复制到剪切板?rn求C#的写法。谢谢。
jquery实现点击复制到剪切板
1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> 2.js实现点击复制的代码 &l...
点击文字复制到剪切板
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
如何将图片复制到剪切板中?
在数据窗口中有一字段,其中存放的是图像文件名,并设为显示为图片,那么我如何将已显示的图片复制到剪切板中呢?
点击按钮把文本框的内容复制到剪切板的代码
  &amp;lt;input id=&quot;demo&quot;&amp;gt;  &amp;lt;button onClick=&quot;demo.select();document.execCommand('copy')&quot;&amp;gt;copy&amp;lt;/button&amp;gt;  &amp;lt;button onClick=&quot;demo.createTextRange().execCommand('copy')&quot;&amp;gt;copy&amp;lt;
把数据复制到剪切板
string code = "2345654";Clipboard.SetDataObject(code); 这样就可以把code复制到剪切板了。 转载于:https://www.cnblogs.com/wz9003/p/8781003.html
把内容复制到剪切板
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;met
JS图片复制到剪切板
看到总有人在问,就记录下来了。纯搬运 New Document function ButtonClick(img) { img.contentEditable = 'true'; var controlRange; if (document.body.createControlRange) { controlRange = documen
SWT 图片复制到剪切板
image = new Image(null, new FileInputStream(imagePath)); ImageData data = image.getImageData(); clipboard.setContents(new ImageData[]{data},new ImageTransfer[]{ImageTransfer.getInstance()}); //复制内容
Vue中配合clipboard.js实现点击按钮复制内容到剪切板
1. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中  clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;  2.引入方式: NPM方式:npm install clipb...
Vue中配合clipboard.js实现点击按钮复制内容到剪切板
需求设定 点击某个按钮,将设置的目标内容(例如下载链接地址)复制到剪切板,可以在电脑上任何地方粘贴 不使用任何框架和使用Flash,以最小的代码实现该功能,并能兼容所有主流浏览器 插件选择 clipboard.js: 官网链接地址:clipboard.js 引入方式: NPM方式:npm install clipboa...
用vue实现复制到剪切板 clipboard.js
用vue实现复制到剪切板 通过在网上查看比较,发现使用clipboard.js是比较理想的手段:1,不用flash,2,插件很小,压缩后只有3kb。 关于clipboard.js,官方文档请戳:https://clipboardjs.com。由于文档是英文的,下面我会简单解释一下具体使用方法。其实目前已经有根据该插件封装好的vue插件了,由于项目中只有一个地方用到该功能,我就没有去考虑封装插件...
JQ和JS实现点击后复制到剪切板
JQ和JS实现点击后复制到剪切板注意:1、点击的按钮必须是button或者input中的button 2、实现的具体网址http://www.cnblogs.com/tinyphp/archive/2013/09/07/3307522.html 注意:ZeroClipboard在本地测试无法使用,必须在服务器上测试,如http://localhost... 准备:ZeroClipboard.swf
点击将文字复制到剪切板
&amp;lt;div class=&quot;uploder_content&quot; id=&quot;copyText&quot; data-clipboard-action=&quot;copy&quot; data-clipboard-target=&quot;#copySpan&quot; onclick=&quot;copyText(this)&quot;&amp;gt; &amp;lt;p&amp;gt;复制&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;1
添加复制到剪切板 flash 按钮
NULL 博文链接:https://robinwu.iteye.com/blog/966156
怎么把一张图片做成按钮的效果,怎么美化按钮?
在网页素材库下载了很多漂亮的按钮图片,怎么把这些图片作成按钮的效果呢?怎么对一个普通的按钮进行简单的美化过程,比如象CSDN上面的那两个“进入”,“注册”的按钮?
js实现复制到剪切板
1.代码   function click1() { var name = document.getElementById("name"); name.select(); document.execCommand("Copy"); alert("已复制好,可贴粘。"); } 2.
clipboard.js实现复制到剪切板
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt;   &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;main class="wrap"&gt; &lt;div id="example-text" class="example"&gt;...
JS 实现复制到剪切板
2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...
怎么将文字和图片一起复制到剪切板
如图,我有一个RichTextBox控件,里面存放有文字与图片,rn问:怎么使按下Command3时将RichTextBox中的文字与图片(即RichTextBox中所有内容)一起复制到系统剪切板?rnrn顺便问一下将文字和图片一同复制到剪切板后RichTextBox怎么再获得这些内容?rnrn请不要提供使用SendKey之类的答案,谢谢!rn
JQ 实现复制到剪切板
JQ 实现复制功能 JQ 实现复制到剪切板 使用JS 插件 下载地址 clipboard.js 官网地址 复制input输入框的值到剪切板 //HTML 代码 &amp;lt;input id=&quot;foo&quot; type=&quot;text&quot; value=&quot;hello&quot;&amp;gt; &amp;lt;button class=&quot;btn&quot; data-clipboard-action=&quot;copy&quot; data-clipbo
vue 点击按钮复制指定内容到剪切板,复制变量值到剪切板
1.安装插件 npm install --save vue-clipboard2 或者 cnpm install --save vue-clipboard2 2.main.js引入,或者在使用的组件页面引入,这里在main.js引入 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(V...
把文本框的内容复制到剪切板
[code=&quot;java&quot;] 无标题页 function copycode() { document.getElementById(&quot;logPanel&quot;).select(); var n=document.getElementById(&quot;logPanel&quot;).value; alert(n); window.clipboardData.setData('text',n); ...
把文本复制到剪切板的问题?
查到一个方法:Clipboard.SetDataObject(txtbox1.Text, true);rn但是实际运行时出现如下提示:rnSystem.Threading.ThreadStateException: 在可以调用 OLE 之前,必须将当前线程设置为单线程单元(STA)模式。请确保您的Main函数带有STAThreadAttribute标记。rn……rn请问怎么解决呢??谢谢啦~~
javascript把网址复制到剪切板
function Url_copy(ob){ ob.select(); js=ob.createTextRange(); js.execCommand("Copy"); alert("地址已成功复制!"); } document.write("<img src=\"images/news/b1.gif\" onclick=\"Url_copy(surls)\" border=0 a
mui 把内容复制到剪切板
function copyShareUrl(){ mui.plusReady(function(){ //复制链接到剪切板 var copy_content = &quot;&quot;; //判断是安卓还是ios if(mui.os.ios){ //ios var UIPasteboard = plus.ios.importClass(&quot;UIPasteboard&quot;);     var genera...
asp.net 把字符串复制到剪切板
functioncopyToClipboard(txt){ if(window.clipboardData){ window.clipboardData.clearData(); window.clipboardData.setData("Text",txt); }elseif(navigator....
mui 把内容复制到剪切板
function copyShareUrl(){ mui.plusReady(function(){ //复制链接到剪切板 var copy_content = ""; //判断是安卓还是ios if(mui.os.ios){ //ios var UIPasteboard = plus.ios.importClass("UIPasteboard"); var gener...
把form和网址复制到剪切板
[code=&quot;java&quot;] 无标题页 function findobj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))&gt;0 &amp;&amp; parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p...
如何实现把对象复制到剪切板和从剪切板粘贴?
我要把一个自定义对象复制到剪切板,然后点一个按钮在从剪切板上粘贴下来还原成对象。rn这个怎么做?
如何将剪切板里的图片复制到Excel中
如何将剪切板里的图片复制到已存在的rnExcel中
excel中的图片复制到剪切板之后处理
最近因为工作需要,制作几个小程序,其中一个需要从剪切板中获取图片并裁剪大小并转换为jpg格式,代码很简单实现了,但是发现一个很奇妙的问题:从excel中复制的图片,如果在excel里面经过拉伸变形,那么获取到的图片便是变形之后的结果,但是如果直接粘贴到windows的 画图 里面,就是原来的尺寸……rnrn分不多,但是还望有哪位高人讲解一二
复制到剪切板
/** 复制内容到剪切板 */ function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData();// 清空剪切板 window.clipboardData.setData(&quot;Text&quot;, txt);// 复制数据到剪切板,这个“Text”属性是固定的 } ...
怎样把图片复制到windows剪切板,注意是图片!
我想在java swing 中实现把图片复制到windows的剪切板上,把一张图片画到jpanel 中,在jpanel中添加一个监听器,当按下crtl + c时,能把图片复制到windows剪切板上!!~~文字的复制,可以在textArea 中调用copy方法就行了是吧??但是图片要怎样实现??
点击按钮,把文本复制到系统剪贴板
点击按钮,把文本复制到系统剪贴板
点击图片实现上一张下一张JS
用js实现。点击图片的左边,去上一张;点击图片的右边,去下一张。 Jquery脚本在http://jquery.com/ 下载 Jquery实现比较简单     $(document).ready(function() {
怎样把一张表里的图片复制到另一张表里?
[code=SQL]rn如下,执行这样的语句出错,该怎么办?rnrninsert into picture(状态图1,状态图2)rn select (select 图1 from image where ID=1),(select 图1 from image where ID=2)rnrn[/code]
怎么把自己的数据复制到剪切板中呀?
怎么把自己的数据复制到剪切板中呀?
vi中的大篇幅文字怎么复制到剪切板
转: vi中全选的命令或者快捷方式 网上有两种说法比较多:“:1,$y”和 “dG” 但是我查到有资料显示:1,$y是全部复制,不是全选 dG这是删除光标所在行到最后一行的内容(包括光标所在行的内容) 还有一个命令是  ggVG 解释是: gg 让光标移到首行,在vim才有效,vi中无效 V   是进入Visual(可视)模式 G  光标移到最后一行 选
相关热词 c#异步发送kafka c#窗体编号 c# 操作二进制文件 c# 反射 机制 c#线程 窗体失去响应 c#角度转弧度 c# 解析gps数据 c# vs设置 语法版本 c# json含回车 c#多线程demo