vue中使用 clipboard.js 一键复制dom里的图片

vue中使用 clipboard.js 一键复制dom里的图片

归档 :之前的方法是使用了一个浏览器废弃的属性 现在应该是不支持了 现在需要借助一下原生来实现

• 准备一个js文件 clipboard.js 没有可以去官网下载
  或者新建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 }))

• 还需要一个html文件 在vue中 使用iframe内嵌用来复制

<!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,{  // 初始化ClipboardJS
        target: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>

这里附上 文件所处项目位置
注意: vue项目里自己新建的html原生文件位置一定要放在public里 否则 iframe引入不了本地文件

• 在需要复制的页面里

 	  <a-button type="link" class="a_blue" @click="handleOk(row)">一键复制</a-button> //row是需要传递的参数 需自行修改
 
      <iframe 
          class="hidden"
          id="copyFrame"
          ref="copyFrame"
          name="copyFrame"
          frameborder="0"
          scrolling="no"
          src="/static/copy/copy.html"
      ></iframe>
      
      .hidden{
      	width: 0;
    	height: 0;
    	opacity: 0;
    	position: absolute;
    	top: -1000%;
    	left: -1000%;
    	z-index: -9999999;
      }

• 函数部分

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

复制成功的结果 可以粘贴到 QQ和微信的聊天框里