VUE 点击按钮复制图片到剪切板

非常感谢这位大佬文章 vue中使用 clipboard.js 一键复制dom里的图片_Var的博客-CSDN博客刚开始没有复制成功，发现是我在本地展示图片的时候img src可以正常加载，row如果传入图片路径，无法复制成功，如果用require加载就可以正常复制了！

1、在public下新建文件如图

2、js中代码

/*!* clipboard.js v2.0.6* https://clipboardjs.com/** Licensed MIT © Zeno Rocha*/
!(function(t, e) { typeof exports === 'object' && typeof module === 'object' ? module.exports = e() : typeof define === 'function' && define.amd ? define([], e) : typeof exports === 'object' ? exports.ClipboardJS = e() : t.ClipboardJS = e() }(this, function() { return o = {}, r.m = n = [function(t, e) { t.exports = function(t) { var e; if (t.nodeName === 'SELECT') t.focus(), e = t.value;else if (t.nodeName === 'INPUT' || t.nodeName === 'TEXTAREA') { var n = t.hasAttribute('readonly');n || t.setAttribute('readonly', ''), t.select(), t.setSelectionRange(0, t.value.length), n || t.removeAttribute('readonly'), e = t.value } else { t.hasAttribute('contenteditable') && t.focus(); var o = window.getSelection(); var r = document.createRange();r.selectNodeContents(t), o.removeAllRanges(), o.addRange(r), e = o.toString() } return e } }, function(t, e) {function n() {}n.prototype = { on: function(t, e, n) { var o = this.e || (this.e = {}); return (o[t] || (o[t] = [])).push({ fn: e, ctx: n }), this }, once: function(t, e, n) { var o = this;function r() { o.off(t, r), e.apply(n, arguments) } return r._ = e, this.on(t, r, n) }, emit: function(t) { for (var e = [].slice.call(arguments, 1), n = ((this.e || (this.e = {}))[t] || []).slice(), o = 0, r = n.length; o < r; o++) n[o].fn.apply(n[o].ctx, e); return this }, off: function(t, e) { var n = this.e || (this.e = {}); var o = n[t]; var r = []; if (o && e)for (var i = 0, a = o.length; i < a; i++) o[i].fn !== e && o[i].fn._ !== e && r.push(o[i]); return r.length ? n[t] = r : delete n[t], this } }, t.exports = n, t.exports.TinyEmitter = n }, function(t, e, n) { var d = n(3); var h = n(4);t.exports = function(t, e, n) { if (!t && !e && !n) throw new Error('Missing required arguments'); if (!d.string(e)) throw new TypeError('Second argument must be a String'); if (!d.fn(n)) throw new TypeError('Third argument must be a Function'); if (d.node(t)) return s = e, f = n, (u = t).addEventListener(s, f), { destroy: function() { u.removeEventListener(s, f) } }; if (d.nodeList(t)) return a = t, c = e, l = n, Array.prototype.forEach.call(a, function(t) { t.addEventListener(c, l) }), { destroy: function() { Array.prototype.forEach.call(a, function(t) { t.removeEventListener(c, l) }) } }; if (d.string(t)) return o = t, r = e, i = n, h(document.body, o, r, i); throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList'); var o, r, i, a, c, l, u, s, f } }, function(t, n) { n.node = function(t) { return void 0 !== t && t instanceof HTMLElement && t.nodeType === 1 }, n.nodeList = function(t) { var e = Object.prototype.toString.call(t); return void 0 !== t && (e === '[object NodeList]' || e === '[object HTMLCollection]') && 'length' in t && (t.length === 0 || n.node(t[0])) }, n.string = function(t) { return typeof t === 'string' || t instanceof String }, n.fn = function(t) { return Object.prototype.toString.call(t) === '[object Function]' } }, function(t, e, n) { var a = n(5);function i(t, e, n, o, r) { var i = (function(e, n, t, o) { return function(t) { t.delegateTarget = a(t.target, n), t.delegateTarget && o.call(e, t) } }.apply(this, arguments)); return t.addEventListener(n, i, r), { destroy: function() { t.removeEventListener(n, i, r) } } }t.exports = function(t, e, n, o, r) { return typeof t.addEventListener === 'function' ? i.apply(null, arguments) : typeof n === 'function' ? i.bind(null, document).apply(null, arguments) : (typeof t === 'string' && (t = document.querySelectorAll(t)), Array.prototype.map.call(t, function(t) { return i(t, e, n, o, r) })) } }, function(t, e) { if (typeof Element !== 'undefined' && !Element.prototype.matches) { var n = Element.prototype;n.matches = n.matchesSelector || n.mozMatchesSelector || n.msMatchesSelector || n.oMatchesSelector || n.webkitMatchesSelector }t.exports = function(t, e) { for (; t && t.nodeType !== 9;) { if (typeof t.matches === 'function' && t.matches(e)) return t;t = t.parentNode } } }, function(t, e, n) { 'use strict';n.r(e); var o = n(0); var r = n.n(o); var i = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function(t) { return typeof t } : function(t) { return t && typeof Symbol === 'function' && t.constructor === Symbol && t !== Symbol.prototype ? 'symbol' : typeof t };function a(t, e) { for (var n = 0; n < e.length; n++) { var o = e[n];o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(t, o.key, o) } }function c(t) {!(function(t, e) { if (!(t instanceof e)) throw new TypeError('Cannot call a class as a function') }(this, c)), this.resolveOptions(t), this.initSelection() } var l = ((function(t, e, n) { return e && a(t.prototype, e), n && a(t, n), t }(c, [{ key: 'resolveOptions', value: function(t) { var e = arguments.length > 0 && void 0 !== t ? t : {};this.action = e.action, this.container = e.container, this.emitter = e.emitter, this.target = e.target, this.text = e.text, this.trigger = e.trigger, this.selectedText = '' } }, { key: 'initSelection', value: function() { this.text ? this.selectFake() : this.target && this.selectTarget() } }, { key: 'selectFake', value: function() { var t = this; var e = document.documentElement.getAttribute('dir') == 'rtl';this.removeFake(), this.fakeHandlerCallback = function() { return t.removeFake() }, this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || !0, this.fakeElem = document.createElement('textarea'), this.fakeElem.style.fontSize = '12pt', this.fakeElem.style.border = '0', this.fakeElem.style.padding = '0', this.fakeElem.style.margin = '0', this.fakeElem.style.position = 'absolute', this.fakeElem.style[e ? 'right' : 'left'] = '-9999px'; var n = window.pageYOffset || document.documentElement.scrollTop;this.fakeElem.style.top = n + 'px', this.fakeElem.setAttribute('readonly', ''), this.fakeElem.value = this.text, this.container.appendChild(this.fakeElem), this.selectedText = r()(this.fakeElem), this.copyText() } }, { key: 'removeFake', value: function() { this.fakeHandler && (this.container.removeEventListener('click', this.fakeHandlerCallback), this.fakeHandler = null, this.fakeHandlerCallback = null), this.fakeElem && (this.container.removeChild(this.fakeElem), this.fakeElem = null) } }, { key: 'selectTarget', value: function() { this.selectedText = r()(this.target), this.copyText() } }, { key: 'copyText', value: function() { var e = void 0; try { e = document.execCommand(this.action) } catch (t) { e = !1 }this.handleResult(e) } }, { key: 'handleResult', value: function(t) { this.emitter.emit(t ? 'success' : 'error', { action: this.action, text: this.selectedText, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) }) } }, { key: 'clearSelection', value: function() { this.trigger && this.trigger.focus(), document.activeElement.blur(), window.getSelection().removeAllRanges() } }, { key: 'destroy', value: function() { this.removeFake() } }, { key: 'action', set: function(t) { var e = arguments.length > 0 && void 0 !== t ? t : 'copy'; if (this._action = e, this._action !== 'copy' && this._action !== 'cut') throw new Error('Invalid "action" value, use either "copy" or "cut"') }, get: function() { return this._action } }, { key: 'target', set: function(t) { if (void 0 !== t) { if (!t || (void 0 === t ? 'undefined' : i(t)) !== 'object' || t.nodeType !== 1) throw new Error('Invalid "target" value, use a valid Element'); if (this.action === 'copy' && t.hasAttribute('disabled')) throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute'); if (this.action === 'cut' && (t.hasAttribute('readonly') || t.hasAttribute('disabled'))) throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target = t } }, get: function() { return this._target } }])), c); var u = n(1); var s = n.n(u); var f = n(2); var d = n.n(f); var h = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function(t) { return typeof t } : function(t) { return t && typeof Symbol === 'function' && t.constructor === Symbol && t !== Symbol.prototype ? 'symbol' : typeof t }; var p = function(t, e, n) { return e && y(t.prototype, e), n && y(t, n), t };function y(t, e) { for (var n = 0; n < e.length; n++) { var o = e[n];o.enumerable = o.enumerable || !1, o.configurable = !0, 'value' in o && (o.writable = !0), Object.defineProperty(t, o.key, o) } } var m = ((function(t, e) { if (typeof e !== 'function' && e !== null) throw new TypeError('Super expression must either be null or a function, not ' + typeof e);t.prototype = Object.create(e && e.prototype, { constructor: { value: t, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : t.__proto__ = e) }(v, s.a)), p(v, [{ key: 'resolveOptions', value: function(t) { var e = arguments.length > 0 && void 0 !== t ? t : {};this.action = typeof e.action === 'function' ? e.action : this.defaultAction, this.target = typeof e.target === 'function' ? e.target : this.defaultTarget, this.text = typeof e.text === 'function' ? e.text : this.defaultText, this.container = h(e.container) === 'object' ? e.container : document.body } }, { key: 'listenClick', value: function(t) { var e = this;this.listener = d()(t, 'click', function(t) { return e.onClick(t) }) } }, { key: 'onClick', value: function(t) { var e = t.delegateTarget || t.currentTarget;this.clipboardAction && (this.clipboardAction = null), this.clipboardAction = new l({ action: this.action(e), target: this.target(e), text: this.text(e), container: this.container, trigger: e, emitter: this }) } }, { key: 'defaultAction', value: function(t) { return b('action', t) } }, { key: 'defaultTarget', value: function(t) { var e = b('target', t); if (e) return document.querySelector(e) } }, { key: 'defaultText', value: function(t) { return b('text', t) } }, { key: 'destroy', value: function() { this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null) } }], [{ key: 'isSupported', value: function(t) { var e = arguments.length > 0 && void 0 !== t ? t : ['copy', 'cut']; var n = typeof e === 'string' ? [e] : e; var o = !!document.queryCommandSupported; return n.forEach(function(t) { o = o && !!document.queryCommandSupported(t) }), o } }]), v);function v(t, e) {!(function(t, e) { if (!(t instanceof e)) throw new TypeError('Cannot call a class as a function') }(this, v)); var n = (function(t, e) { if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return !e || typeof e !== 'object' && typeof e !== 'function' ? t : e }(this, (v.__proto__ || Object.getPrototypeOf(v)).call(this))); return n.resolveOptions(e), n.listenClick(t), n }function b(t, e) { var n = 'data-clipboard-' + t; if (e.hasAttribute(n)) return e.getAttribute(n) }e.default = m }], r.c = o, r.d = function(t, e, n) { r.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: n }) }, r.r = function(t) { typeof Symbol !== 'undefined' && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: 'Module' }), Object.defineProperty(t, '__esModule', { value: !0 }) }, r.t = function(e, t) { if (1 & t && (e = r(e)), 8 & t) return e; if (4 & t && typeof e === 'object' && e && e.__esModule) return e; var n = Object.create(null); if (r.r(n), Object.defineProperty(n, 'default', { enumerable: !0, value: e }), 2 & t && typeof e !== 'string')for (var o in e) r.d(n, o, function(t) { return e[t] }.bind(null, o)); return n }, r.n = function(t) { var e = t && t.__esModule ? function() { return t.default } : function() { return t }; return r.d(e, 'a', e), e }, r.o = function(t, e) { return Object.prototype.hasOwnProperty.call(t, e) }, r.p = '', r(r.s = 6).default;function r(t) { if (o[t]) return o[t].exports; var e = o[t] = { i: t, l: !1, exports: {} }; return n[t].call(e.exports, e, e.exports, r), e.l = !0, e.exports } var n, o }))

3、html文件中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>复制</title>
</head>
<style></style><body><div><div id="copybox" class="copybox"><div id="widget"><img id="canvasimg" src="" alt=""></div></div><button>复制</button></div><script src="clipboard.min.js"></script> //引入clipboard.min.js 路径看自己放在那里<script>var copybox = document.getElementById('copybox'); //复制该dom里的图片和文字//获取必要dom元素进行传值 赋值var widget = document.getElementById('widget');var canvasimg = document.getElementById('canvasimg');var makeimg = "" //定义一个变量来接收传入的值var clipboard = new ClipboardJS(copybox, { // 初始化ClipboardJStarget: function() {return document.querySelector('.copybox')}});//成功回调console.log(clipboard)clipboard.on('success', function(e) {console.info('复制成功');e.clearSelection();});//失败回调clipboard.on('error', function(e) {console.error('复制失败', e.action);});//定义一个函数来触发复制function domakeimg() {// writing.style.display='none' //该行是另一个需要复制的盒子 这里不复制它 所以隐藏canvasimg.src = makeimg //在这里 主页面已经给makeimg 赋值了copybox.click() //触发复制}</script>
</body></html>

4、组件中使用


<div><imgid="img_body"src="./Applet/image/Statistics/statistics-itemBg.png"alt=""/></div><iframeclass="hidden"id="copyFrame"ref="copyFrame"name="copyFrame"frameborder="0"scrolling="no"src="/static/copy/copy.html"></iframe><el-button @click="handleOk(row)">复制图片</el-button></div>

5、注意传入的row数据可以在data中声明

data(){return{row: {url: require("./Applet/image/Statistics/statistics-itemBg.png"),},}
}

6、方法中使用

 handleOk(row) {// console.log(row) //接收需要传递的参数const obj1 = window.frames['copyFrame'] // 获得对应iframe的window对象obj1.makeimg = row.url   //传入图片地址obj1.domakeimg()  //执行复制函数this.$message.success('复制成功!')  //进行反馈},

7、iframe可以隐藏根据自己情况

.hidden{width: 0;height: 0;opacity: 0;position: absolute;top: -1000%;left: -1000%;z-index: -9999999;}

8、实现效果

9、在微信对话框里效果

VUE 点击按钮复制图片到剪切板相关推荐

vue复制图片到剪切板
vue复制图片到剪切板最开始使用clipboard2,本地和测试环境都能运行,到了生产环境就无法粘贴到微信. 后来搜索到可以将图片转换成blod直接复制到剪切板,代码如下 <img :src= ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
html5图片剪切板,原生js实现基于base64数据复制图片到剪切板，可以粘贴出图片，模拟浏览器复制功能。...
原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能.前言: 初次发帖排版略丑,见谅.之前我们这边有个需求就是说,前端通过canvas截图然后, 点击一个按钮实现复制截 ...
html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
html5图片剪切板,JavaScript 网页端复制图片到剪切板
前端页面可能需要复制图片到剪切板的功能,这里使用JavaScript来实现这一功能,兼容大部分浏览器全部代码复制图片到剪切板复制图片 var SelectText = function (ele ...
html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
js 复制图片到剪切板和 js复制文本到剪切板
js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...
JS复制图片到剪切板读取剪切板
JS复制图片到剪切板读取剪切板 navigator.clipboard实现复制图片图片写入剪切板 function handleCopyImg() { const canvas = documen ...
java 复制图片到剪切板
Java 如何复制图片到剪切板呢? 下面是我做的一个软件: 项目源代码见附件这里面就有"复制图片到剪切板"功能.核心方法如下: Java代码 /*** * 复制图片到剪切板 ...

VUE 点击按钮复制图片到剪切板

VUE 点击按钮复制图片到剪切板相关推荐

最新文章

热门文章

VUE 点击按钮 复制图片到剪切板

VUE 点击按钮 复制图片到剪切板相关推荐

最新文章

热门文章

VUE 点击按钮复制图片到剪切板

VUE 点击按钮复制图片到剪切板相关推荐