使用JavaScript实现带格式复制SharePoint页面内容至剪贴板的需求

嘿，我完全懂你的困扰！折腾半天弄好的SharePoint复制按钮，结果只能复制干巴巴的纯文本，那些精心设置的加粗、斜体、超链接格式全没了，确实挺闹心的。别担心，咱们只需要对现有代码做几处小调整，分分钟就能实现带格式复制的功能！

问题出在哪？ #

你现在的代码里用了copyDiv.innerText和navigator.clipboard.writeText()——这俩组合只能提取和复制纯文本，自然没法保留任何格式。要复制富文本，咱们得换个思路：提取内容的HTML结构，然后把它作为富文本写入剪贴板。

修改后的完整代码 #

替换你原来的JavaScript代码就行，HTML部分完全不用改：

function myFunction(divId) {
  const copyDiv = document.getElementById(divId);

  if (copyDiv) {
    // 提取带格式的HTML内容，替代纯文本
    const htmlToCopy = copyDiv.innerHTML;
    
    // 创建HTML格式的Blob对象
    const blob = new Blob([htmlToCopy], { type: 'text/html' });
    // 包装成剪贴板可识别的ClipboardItem
    const clipboardItem = new ClipboardItem({ 'text/html': blob });

    navigator.clipboard.write([clipboardItem])
      .then(() => {
        let tooltip = document.getElementById("myTooltip");
        tooltip.innerHTML = "Copied";
        setInterval(() => {
          tooltip.innerHTML = "Copy Template"
        }, 1000);
      })
      .catch(err => {
        console.error('Could not copy formatted text: ', err);
      });
  } else {
    console.error('Element to copy from could not be found');
  }
}

关键修改点说明 #

• 把innerText换成innerHTML：这样就能拿到包含所有格式标签（比如<strong>、<a>）的完整内容
• 用navigator.clipboard.write()替代writeText()：writeText只支持纯文本，write可以处理富文本类型的ClipboardItem
• 创建Blob和ClipboardItem：这一步是告诉浏览器我们要复制的是HTML格式内容，确保粘贴时能完整保留排版和样式

验证步骤 #

按照你原来的流程操作就行，只需要替换Script Editor里的JS代码：

• 编辑SharePoint页面，把修改后的JS代码放进Script Editor
• 发布页面后点击复制按钮
• 粘贴到支持富文本的地方（比如SharePoint富文本编辑器、Word、Outlook邮件框），就能看到格式完全保留啦！

小提醒 #

如果遇到复制失败，打开浏览器控制台（F12）看看报错信息——大概率是权限问题，但你的代码是通过用户点击触发复制的，已经满足浏览器的安全要求，一般不会出问题。

备注：内容来源于stack exchange，提问作者Jake Hembree