SOURCE

/**
 * js复制图片到剪贴板
 * 复制到剪贴板图片默认png
 * v-canvas2clipboard
 */
import html2canvas from 'html2canvas';
class canvas2clipboard {
    constructor(el, binding, vnode) {
        const { target, scale=1, handler: callback, } = binding.value;
        this.scale = scale;
        // 绑定事件
        el.addEventListener('click', () => {
            if (typeof ClipboardItem !== 'function' || !navigator.clipboard) {
                callback({
                    success: false,
                    errorCode: '1',
                    info: '浏览器不支持navigator.clipboard，无法复制到剪贴板'
                })
                return;
            }
            this.dom2Image(vnode.context.$refs[target], (canvas) => {
                this.canvas2blob(canvas, (blob) => {
                    this.copy(blob, canvas, (result) => {
                        callback(result)
                    })
                })
            })
            // npm 不允许发布外部依赖项，此处直接传入canvas
            // this.canvas2blob(vnode.context.$refs[target], (blob) => {
            //     this.copy(blob, canvas, (result) => {
            //         callback(result)
            //     })
            // })
        })
    }
    // dom 转 canvas
    dom2Image(dom, done) {
        html2canvas(dom, {
            useCORS: true,
            scale: this.scale || 1,
        }).then(canvas => {
            done(canvas);
        });
    }
    // canvas 转 blob
    canvas2blob(canvas, done) {
        canvas.toBlob( blob => {
            done(blob)
        })
    }
    // 复制到剪贴板
    copy(blob, canvas, done) {
        navigator.clipboard.write([
            // eslint-disable-next-line no-undef
            new ClipboardItem({
                [blob.type]: blob
            })
        ]).then(() => {
            done({
                canvas,
                blob,
                success: true,
            })
        }).catch(() => {
            done({
                success: false,
                errorCode: '2',
                info: '浏览器未获取权限'
            })
        });
    }
}

var Main = {
  data() {
    return {
      tableData: []
    }
  },
  created () {
   
  },
  methods: {
    clickCopy_b(){
        debugger;
        var a = document.getElementById("wechat-copy-main");
        console.log(a);
        this.copyFunction(a, "#aaa");
    },

    copyFunction(t, a){
        let _this = this;
        var e = new Clipboard(a, {
            target: function () {   
                return console.log(t, a),
                t
            }
        });
        e.on("success", function (t) {
            _this.$message({
                message: '复制成功',
                type: 'success'
            });
            t.clearSelection()
        }),
        e.on("error", function (t) {
            // console.log('复制失败');
            _this.$message({
                message: '复制失败',
                type: 'error'
            });
            t.clearSelection()
        })
    },
  }
};
var Ctor = Vue.extend(Main);
 Vue.directive('canvas2clipboard', {
            bind: function (el, binding, vnode) {
                new canvas2clipboard(el, binding, vnode)
            }
        });
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<div id="app">
  <template>
    <div>
      <div class="globalSearchBtn posterDivRightBtn btn" @click="clickCopy_b" id="aaa">
         <button class="globalSearchBtn_a">复制</button>
    </div>

    <div class="posterDivRight_text" id="bar">复制图片到剪切板可直接粘贴发送微信群</div>

    <div id="wechat-copy-main">
    <img class='' src='https://scp-static.cicsc.com/uat/spreadChannel/7459678991482880/template7459678991482880.png' style='width:50px;' >
    </div>
   </div>  
  </template>
</div>