使用Clipboard复制图文至Slack失败问题求助

问题根源 #

Slack对剪贴板内容的解析逻辑和记事本存在差异，主要原因包括：

• 仅提供text/html格式时，Slack可能无法正确解析，且未设置纯文本备选时会导致内容丢失。
• Slack支持的HTML标签有限，冗余的空白、松散的结构会干扰解析。
• 远程图片链接粘贴后，Slack不会主动抓取并渲染图片，仅保留链接文本。

解决方案 #

1. 添加纯文本备选格式：确保HTML解析失败时，文本内容仍能正常显示。
2. 优化HTML结构：精简空白，用标准容器标签包裹内容，适配Slack的解析规则。
3. 嵌入图片为Data URI（可选）：将远程图片转为base64编码嵌入HTML，让Slack直接渲染图片。

修改后的代码 #

JavaScript

const btn = document.getElementById("btn");
const out = document.getElementById("out");

btn.addEventListener("click", async () => {
  try {
    // 纯文本备选内容
    const plainText = "This should work\n[Image: https://picsum.photos/seed/picsum/200/300]";
    
    // 精简后的HTML结构
    let html = `<div><img src="https://picsum.photos/seed/picsum/200/300"><p>This should work</p></div>`;

    // 可选：将远程图片转为Data URI（需目标图片支持CORS）
    /*
    const imageRes = await fetch("https://picsum.photos/seed/picsum/200/300");
    const imageBlob = await imageRes.blob();
    const imageBase64 = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.readAsDataURL(imageBlob);
    });
    html = `<div><img src="${imageBase64}"><p>This should work</p></div>`;
    */

    // 同时提供纯文本和HTML格式的剪贴板项
    const data = [
      new ClipboardItem({
        "text/plain": new Blob([plainText], { type: "text/plain" }),
        "text/html": new Blob([html], { type: "text/html" })
      })
    ];

    await navigator.clipboard.write(data);
    out.innerText = "Copied to clipboard!";
  } catch (err) {
    out.innerText = "Error: " + err;
  }
});

HTML

<p>Click Copy, then paste into Word/Teams/Slack</p>
<button id="btn" type="button">Copy Content</button>
<pre id="out"></pre>

补充说明 #

• 使用Data URI方案时，需确保图片服务器支持CORS；若不支持，可通过后端代理获取图片。
• Slack仅支持基础HTML标签（如<div>、<p>、<img>等），避免使用复杂嵌套或非标准标签。

内容的提问来源于stack exchange，提问作者Sajeesh Krishnan