Angular如何复制带样式文本？使用cdkCopyToClipboard仅复制HTML代码怎么办

AI 小北

2026-10-7

原因

Angular CDK自带的cdkCopyToClipboard默认仅支持纯文本内容复制，直接传入带HTML标签的字符串时，标签会被识别为普通文本内容，所以粘贴后会展示源码而非渲染后的样式。

实现方案

你可以通过浏览器原生的Async Clipboard API自定义复制逻辑，支持写入富文本内容，实现方式如下：

修改模板代码

<button (click)="copyRichText()">点击复制</button>

编写组件逻辑

import { Component } from '@angular/core';
import { Clipboard } from '@angular/cdk/clipboard';

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  constructor(private clipboard: Clipboard) {}

  copyRichText() {
    // 定义要复制的富文本内容
    const richText = 'You copied me!<b>hello</b>';
    const blob = new Blob([richText], { type: 'text/html' });
    const clipboardItem = new ClipboardItem({ 'text/html': blob });

    navigator.clipboard.write([clipboardItem]).then(() => {
      // 可自行添加复制成功提示
    }).catch(() => {
      // 兼容性降级：如果浏览器不支持富文本写入，回退到纯文本复制
      const plainText = richText.replace(/<[^>]*>/g, '');
      this.clipboard.copy(plainText);
    });
  }
}