本篇内容主要讲解“vue怎么实现复制文字和图片”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现复制文字和图片”吧!
document.execCommand('copy')
在很久之前我们是使用document.execCommand('copy')来实现复制文本的，但是现在mdn上已经将这个命令废弃了。
当一个 HTML 文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。如果传入copy命令，那么就能实现复制的功能。
比如像下面这样
// 复制文字 copyText(link, cb) { let input = document.createElement('textarea'); input.style.cssText = 'position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;'; input.value = link; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); if (typeof cb === 'function') { cb(); } }Clipboard
Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。
方法
Clipboard提供了以下方法，方便我们读取剪切板的内容。
read():从剪贴板读取数据（比如图片），返回一个
Promise对象。在检索到数据后，promise 将兑现一个ClipboardItem对象的数组来提供剪切板数据。readText():从操作系统读取文本；返回一个
Promise，在从剪切板中检索到文本后，promise 将兑现一个包含剪切板文本数据的DOMString。write(): 写入任意数据至操作系统剪贴板。这是一个异步操作，在操作完成后，返回的 promise 的将被兑现。
writeText(): 写入文本至操作系统剪贴板。返回一个
Promise，在文本被完全写入剪切板后，返回的 promise 将被兑现。
复制文本
复制文本的方法很简单，就是使用navigator.clipboard.writeText()方法。
具体代码实现如下：
copyTextToClipboard(text) { return new Promise((resolve, reject) => { navigator.clipboard.writeText(text).then( () => { resolve(true) }, () => { reject(new Error('复制失败')) } ) })}复制图片
复制图片主要用到navigator.clipboard.write()方法。 因为我们在页面中通常是要根据一个img元素复制图片，主要实现思路如下：
先将
img元素转成base64再将
base64转成blob对象根据
blob对象new一个ClipboardItem对象最后再根据
navigator.clipboard.writeText()将内容写入剪贴板中
具体代码实现如下：
// 图片元素转base64 getBase64Image(img) { let canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext('2d'); ctx?.drawImage(img, 0, 0, img.width, img.height); let dataURL = canvas.toDataURL('image/png'); return dataURL; }, // base64图片转为blob getBlobImage(dataurl) { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }, // 复制图片 copyImage(dom, cb) { let dataurl = this.getBase64Image(dom); let blob = this.getBlobImage(dataurl); navigator.clipboard.write([ new window.ClipboardItem({ [blob.type]: blob }) ]).then(function() { if (typeof cb === 'function') { cb(); } }, function() { console.log('图片复制失败！'); }); }到此，相信大家对“vue怎么实现复制文字和图片”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
