核心代码
/*复制图片*/ copyImg(dom) { /* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */ dom.style.userSelect = 'auto'; let selection = getSelection(), range = document.createRange(); selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange (range), document.execCommand('copy'), selection.removeAllRanges(); },
用例
<template> <div> <div ref="img"> <img src="https://gips2.baidu.com/it/u=1070828945,3304149431&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f150_150"> </div> <el-input v-model.trim="inputValue" placeholder="请输入内容" clearable /> <el-button type="primary" @click="copyImg($refs.img)">复制图片</el-button> </div> </template> <script> export default { data() { return { inputValue: '', } }, methods: { /*复制图片*/ copyImg(dom) { /* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */ dom.style.userSelect = 'auto'; let selection = getSelection(), range = document.createRange(); selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange(range), document.execCommand('copy'), selection.removeAllRanges(); }, } }; </script>
扩展用法(自定义复制成功提示文本+弹窗方式)
/*复制图片*/ copyImg(dom, isAlert, successMsg = '') { /* 警告:dom不能是img标签,建议用DIV标签包裹img标签,否者会报错!不支持复制背景图! */ dom.style.userSelect = 'auto'; let selection = getSelection(), range = document.createRange(); selection.removeAllRanges(), range.selectNodeContents(dom), selection.addRange (range), document.execCommand('copy'), selection.removeAllRanges(); if (isAlert) { if (typeof isAlert === "function") { isAlert(successMsg || "图片复制成功"); } else { Message.success(successMsg || "图片复制成功"); } } },