使用JS navigator.clipboard复制HTML/富文本失败求助

你的问题出在**text/html类型的剪贴板内容需要遵循特定格式规范**，而非直接传入HTML片段。以下是修正方案：

修正后的代码 #

const type = "text/html";
// 符合CF_HTML格式的富文本内容
const htmlContent = `Version:0.9
StartHTML:0000000105
EndHTML:0000000174
StartFragment:0000000141
EndFragment:0000000148
<html>
<body>
<!--StartFragment--><b>text html</b><!--EndFragment-->
</body>
</html>`;
const blob = new Blob([htmlContent], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data).then(
    () => {alert('success html copy')},
    () => {}
);

原因说明 #

当复制text/html类型内容时，浏览器和系统剪贴板遵循CF_HTML格式规范（这是跨平台兼容的富文本剪贴板标准）：

• 必须包含版本声明、HTML文档起止位置、富文本片段起止位置等元信息
• 实际要复制的富文本内容需要包裹在<!--StartFragment-->和<!--EndFragment-->标记之间
• 直接传入<b>text html</b>这类片段不符合规范，剪贴板无法识别为有效富文本，导致复制后无内容

封装工具函数简化操作 #

手动编写CF_HTML格式容易出错，可以封装一个工具函数自动生成符合要求的内容：

function createHtmlClipboardContent(htmlFragment) {
  const prefix = `Version:0.9
StartHTML:0000000000
EndHTML:0000000000
StartFragment:0000000000
EndFragment:0000000000
<html>
<body>
<!--StartFragment-->`;
  const suffix = `<!--EndFragment-->
</body>
</html>`;
  
  const fullContent = prefix + htmlFragment + suffix;
  // 计算各位置的8位数字偏移量
  const startHtml = prefix.length.toString().padStart(8, '0');
  const endHtml = fullContent.length.toString().padStart(8, '0');
  const startFragment = prefix.length.toString().padStart(8, '0');
  const endFragment = (prefix.length + htmlFragment.length).toString().padStart(8, '0');
  
  return fullContent
    .replace('StartHTML:0000000000', `StartHTML:${startHtml}`)
    .replace('EndHTML:0000000000', `EndHTML:${endHtml}`)
    .replace('StartFragment:0000000000', `StartFragment:${startFragment}`)
    .replace('EndFragment:0000000000', `EndFragment:${endFragment}`);
}

// 使用示例
const htmlFragment = '<b>text html</b>';
const htmlContent = createHtmlClipboardContent(htmlFragment);
const blob = new Blob([htmlContent], { type: 'text/html' });
const data = [new ClipboardItem({ ['text/html']: blob })];

navigator.clipboard.write(data).then(
    () => alert('success html copy'),
    () => {}
);

内容的提问来源于stack exchange，提问作者Muhammad Dyas Yaskur