前端实现复制功能

前端实现复制功能

方法一

<input id="webUrl" value="https://online.hbisco.cn" />

const oUrl: any = document.getElementById(webUrl)
oUrl.select()
document.execCommand('Copy')

select() 方法用于选取文本域中的内容。即将废弃

总结：此方法可实现复制功能，不过select() 方法即将废弃，不推荐使用。

方法二

Clipboard

不是Clipboard通过实例化创建对象，而是通过Navigator.clipboard全局访问系统剪贴板。
使用 clipboard 的 writeText 方法实现复制

const oUrl: any = document.getElementById(id)
const value = oUrl.value
const clipboardObj = navigator.clipboard
await clipboardObj.writeText(value)

使用 clipboard 的 write 方法实现复制

const oUrl: any = document.getElementById(id)
const value = oUrl.value
const clipboardObj = navigator.clipboard
const type = "text/plain"
const blob = new Blob([value], { type });
const data = [new ClipboardItem({ [type]: blob })]
await clipboardObj.write(data)

clipboard 拥有的方法：

read : 读取剪切板的内容；
readText: 读取剪切板文字内容；
write： 向剪切板中写入文字内容；
writeText: 向剪切板中写入内容;

从剪切板中拿到的数据

例子： 一个图片

例子： 文字

总结： 推荐使用。大多数浏览器支持。

浏览器兼容性：

为了解决少部分浏览器及低版本浏览器不支持问题，可将方法一二结合，如下：

const oUrl: any = document.getElementById('example')
const clipboardObj = navigator.clipboard
 if (clipboardObj) {
     await clipboardObj.writeText(this.portalUrl)
 } else {
     oUrl.select()
     document.execCommand('Copy')
 }