H5复制内容到剪切板

最新推荐文章于 2023-09-19 16:38:07 发布

qq_40088412

最新推荐文章于 2023-09-19 16:38:07 发布

阅读量3.5k

点赞数

分类专栏：前端开发文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_40088412/article/details/121946393

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、execCommand方法

document.execCommand(‘copy’, true);

clipboardCopy(content){
	let copyDom = document.createElement('div')
	copyDom.innerText = content
	copyDom.style.position = 'absolute'
	copyDom.style.top='0px'
	copyDom.style.right='-9999px'
	document.body.appendChild(copyDom)
	//创建选中范围
	let range = document.createRange()
	range.selectNode(copyDom)
	//移除剪切板中内容
	window.getSelection().removeAllRanges()
	//添加新的内容到剪切板
	window.getSelection().addRange(range)
	//复制
	let successful = document.execCommand('copy')
	copyDom.parentNode.removeChild(copyDom)
	if(successful){
		Toast.info('复制成功')  
	}else{
		this.switchWxDialog = true
	}
}

此语法已被废弃
在这里插入图片描述

2、Clipboard API

if (navigator.clipboard) {
     console.log('navigator.clipboard')
     navigator.clipboard.writeText(content).then(()=>{
     	Toast.info('复制成功')
    })
}