前端一键复制到剪贴板，带格式复制

NJR10byh

已于 2022-02-28 13:18:46 修改

阅读量1.3k

点赞数

分类专栏：笔记文章标签： JavaScript 复制功能文本选择 execCommand 前端开发

于 2022-02-13 01:13:17 首次发布

本文链接：https://blog.csdn.net/NJR10byh/article/details/122904672

版权

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一键复制功能，包括代码实现细节和使用示例。通过创建文本范围和选择内容，然后调用`document.execCommand('copy')`来复制文本。复制前后效果对比清晰，操作简便，适用于网页中的各种复制需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此一键复制可支持换行符，也可支持加粗等字体样式

// 复制（id为待复制内容的父类div的id）
Copy() {
    	this.selectElementContents(document.getElementById("CopyContent"));
},

// js一键复制
selectElementContents(el) {
      var body = document.body,
        range,
        sel;
      if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
          range.selectNodeContents(el);
          sel.addRange(range);
        } catch (e) {
          range.selectNode(el);
          sel.addRange(range);
        }
        document.execCommand("copy");
        //取消文本选中状态
        window.getSelection().empty();
        this.$message({
          message: "已复制",
          type: "success",
        });
      }
    },