前端实现将内容复制到剪切板的实现方法(个人项目使用)

复制代码
export const writeStringToClipboard =(text:string)=>{
    const el=document.createElement('textarea');
    el.value=text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
}

其中, document.execCommand已经被废弃了,不建议使用了,所以推荐使用下面的新方法 :

复制代码
async function copyTextToClipboard(text) {  
    try {  
      await navigator.clipboard.writeText(text);  
      console.log('Text copied to clipboard');  
    } catch (err) {  
      console.error('Failed to copy text: ', err);  
    }  
  }  
    
  // 使用方法  
  copyTextToClipboard('测试复制功能');

是不简单多了一下子.

相关推荐
漠月瑾-西安4 分钟前
React 组件二次封装实践:解决自定义 Props 传递导致的 DOM 警告问题
typescript·ant design·react hooks·react组件封装
im_AMBER9 分钟前
React 18
前端·javascript·笔记·学习·react.js·前端框架
老前端的功夫12 分钟前
Vue2中key的深度解析:Diff算法的性能优化之道
前端·javascript·vue.js·算法·性能优化
集成显卡35 分钟前
AI取名大师 | PM2 部署 Bun.js 应用及配置 Let‘s Encrypt 免费 HTTPS 证书
开发语言·javascript·人工智能
han_36 分钟前
前端高频面试题之Vue(高级篇)
前端·vue.js·面试
不说别的就是很菜1 小时前
【前端面试】CSS篇
前端·css·面试
by__csdn2 小时前
nvm安装部分node版本后没有npm的问题(14及以下版本)
前端·npm·node.js
by__csdn2 小时前
Node与Npm国内最新镜像配置(淘宝镜像/清华大学镜像)
前端·npm·node.js
脸大是真的好~2 小时前
黑马JAVAWeb -Vue工程化-API风格 - 组合式API
前端·javascript·vue.js
我命由我123452 小时前
CesiumJS 案例 P35:添加图片图层(添加图片数据)
开发语言·前端·javascript·css·html·html5·js