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

复制代码
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('测试复制功能');

是不简单多了一下子.

相关推荐
攀登的牵牛花几秒前
前端向架构突围系列 - 框架设计(四):依赖倒置原则(DIP)
前端·架构
Van_Moonlight1 分钟前
RN for OpenHarmony 实战 TodoList 项目:已完成未完成数量显示
javascript·开源·harmonyos
程序员爱钓鱼8 分钟前
Node.js 编程实战:测试与调试 —— 日志与监控方案
前端·后端·node.js
Mapmost17 分钟前
数字孪生项目效率翻倍!AI技术实测与场景验证实录
前端
小酒星小杜21 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统-Input篇
前端·程序员·架构
Cache技术分享29 分钟前
290. Java Stream API - 从文本文件的行创建 Stream
前端·后端
陈_杨31 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片开发完全指南
前端·harmonyos
小杨同学4937 分钟前
C 语言实战:枚举类型实现数字转星期(输入 1~7 对应星期几)
前端·后端
陈_杨39 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片刷新机制
前端·harmonyos
go_caipu1 小时前
Vben Admin管理系统集成qiankun微服务(二)
前端·javascript