掌握JavaScript剪贴板操作：复制HTML元素与链接到Word

/**
 * 将用户当前选定的文本复制到剪贴板。
 * 此操作只复制纯文本，会忽略任何HTML格式或链接。
 */
const copySelectedText = async () => {
  try {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
      await navigator.clipboard.writeText(selectedText);
      console.log('选定文本已成功复制到剪贴板。');
    } else {
      console.log('没有文本被选中。');
    }
  } catch (err) {
    console.error('复制文本失败: ', err);
  }
};

<div>
  <p>这是一段包含<b>粗体</b>和<span style="color: #00F;">彩色文字</span>的示例文本。</p>
  <p>用户可以选中此段文本，然后点击按钮复制。</p>
</div>
<button onclick="copySelectedText()">复制选定文本</button>
<br>
<textarea style="width: 40em; height: 5em;" placeholder="在此处粘贴以验证"></textarea>

/**
 * 监听 'copy' 事件，并在用户执行复制操作时，
 * 强制剪贴板只包含选定的纯文本内容。
 */
document.addEventListener("copy", e => {
  const selectedText = window.getSelection().toString();
  if (selectedText) {
    e.clipboardData.setData("text/plain", selectedText); // 设置纯文本数据
    e.preventDefault(); // 阻止默认的复制行为，使用我们自定义的数据
    console.log('默认复制行为被覆盖，已复制纯文本。');
  }
});

<div>
  <p>这是一段包含 <a href="https://example.com">可点击链接</a> 和 <b>粗体字</b> 的文本。</p>
  <p>尝试选中其中的链接或粗体字，然后使用 Ctrl+C (或 Cmd+C) 复制。</p>
</div>
<br>
<textarea style="width: 40em; height: 5em;" placeholder="在此处粘贴以验证"></textarea>

/**
 * 复制指定元素的HTML内容及其纯文本内容到剪贴板。
 * 这允许在支持HTML粘贴的应用程序中保留链接和格式。
 * @param {string} elementId 要复制其内容的元素的ID。
 */
const copyHtmlWithLink = async (elementId) => {
  const element = document.getElementById(elementId);
  if (!element) {
    console.error(`未找到ID为 "${elementId}" 的元素。`);
    return;
  }

  // 获取元素的外部HTML（包括自身标签）和内部文本
  const htmlContent = element.outerHTML;
  const plainTextContent = element.innerText;

  try {
    // 创建Blob对象，分别用于text/html和text/plain类型
    const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
    const textBlob = new Blob([plainTextContent], { type: 'text/plain' });

    // 使用 ClipboardItem 写入多种MIME类型的数据
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': htmlBlob,
        'text/plain': textBlob
      })
    ]);
    console.log('HTML和纯文本内容已成功复制到剪贴板！');
  } catch (err) {
    console.error('复制内容失败: ', err);
    // 权限错误通常需要用户手势触发
    if (err.name === 'NotAllowedError') {
      alert('复制操作需要用户授权或必须在用户手势（如点击按钮）后触发。');
    }
  }
};

<div>
  <p>您的票号是: <a id="ticketLink" href="https://server/form/id?ticket_number=12345">TICKET-12345</a></p>
  <button onclick="copyHtmlWithLink('ticketLink')">复制带链接的票号</button>
</div>
<br>
<textarea style="width: 40em; height: 5em;" placeholder="在此处粘贴以验证（例如粘贴到Word或富文本编辑器）"></textarea>